<style>
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'Signika', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; 
background:#555; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; 
text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}

.menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;
 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
 }
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}
</style>
<div class ="menu">
    <ul>
	   <li><a href="#">Home</a></li>
	   <li><a href="#url">Services ∇</a>
	   <ul>
		  <li>
			 <span><a href="#">Printing &amp; Framing</a>
			 <span><a href="#">Photo Editing</a>
			 <span><a class ="last" href="#">Storage &amp; Backup</a>
			 </span></span></span>
		  </li>
	   </ul>
	   </li>
	   <li><a href="#url">Contacts ∇</a>
	   <ul>
		  <li>
			 <span><a href="#">Support</a>
			 <span><a href="#">Sales</a>
			 <span><a href="#">Buying</a>
			 <span><a href="#">Photographers</a>
			 <span><a href="#">Stockist</a>
			 <span><a class ="last" href="#">General</a>
			 </span></span></span></span></span></span>
		  </li>
	   </ul>
	   </li><li>
	   </li><li><a href="#url">Stores Location ∇</a>
	   <ul>
		  <li>
			 <span><a href="#">South West Region</a>
			 <span><a href="#">North East Region</a>
			 <span><a class ="last" href="#">Central Region</a>
			 </span></span></span>
		  </li>
	   </ul>
	   </li>
	   <li><a href="#url">Contact Us ∇</a>
	   <ul>
		  <li>
			 <span><a href="#">Email Addresses</a>
			 <span><a href="#">By Post</a>
			 <span><a class ="last" href="#">Telephone Numbers</a>
			 </span></span></span>
		  </li>
	   </ul>
	   </li>
	   <li><a href="#url">Sales ∇</a>
	   <ul>
		  <li>
			 <span><a href="#">Digital SLR Cameras</a>
			 <span><a href="#">Interchangeable Lenses</a>
			 <span><a href="#">Flash Guns &amp; Accessories</a>
			 <span><a href="#">Professional Tripods</a>
			 <span><a class ="last" href="#">Filters &amp; Lens Hoods</a>
			 </span></span></span></span></span>
		  </li>
	   </ul>
	   </li>
	   <li><a href="#">Privacy Policy</a></li>
    </ul>
    <img src="trans.gif" alt="" title="">
</div>
<div style="height:200px"></div>