<style>
.holder {position:relative; z-index:100; margin:0 auto 200px auto; width:206px;}
#menu {border:3px solid #222; font-family:arial, sans-serif;
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.7);
position:absolute;
}
#menu, #menu ul {padding:0; margin:0; list-style:none; width:200px;}
#menu ul {position:relative; z-index:-1;}
#menu li {position:relative; position:relative; z-index:100;}
#menu ul li {margin-top:-22px;
-moz-transition:  0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#menu li a {display:block; width:195px; padding-left:5px; background:#e8e8e8; color:#000; text-decoration:none; font-size:12px; font-weight:bold; 
line-height:25px; outline:0;}
#menu li a img {border:0; float:left; padding-right:5px;}
#menu li a.sub {background: #e8e8e8 url(down.gif) no-repeat 180px center;}
#menu li a + img {display:block; width:200px; height:25px; position:absolute; left:0; top:0; display:none; cursor:pointer; 
background:url(up.gif) no-repeat 180px center;}
#menu li a:hover {background-color:#ddd;}
#menu ul li a {background: #fff url(sub.png) no-repeat 10px center; color:#666; font-size:11px; line-height:22px; padding-left:35px; width:165px;}
#menu ul li a.lastLink {background: #fff url(sub-last.png) no-repeat 10px center;}
#menu ul li:hover a {background-color:#f0f0f0; color:#000;}
#menu a.sub:focus {outline:0;background:#ddd;}
#menu a:focus ~ ul li {margin-top:0;}
#menu a:focus + img {display:block;}
#menu a.sub:active {outline:0;background:#ddd;}
#menu a:active ~ ul li {margin-top:0;}
#menu a:active + img {display:block;}
#menu ul:hover li {margin-top:0;}
</style>
<br><br>
<div class ="holder">
<ul id="menu">
    <li><a href="#"><img src="home.png" alt="">HOME</a></li>
    <li><a class ="sub" href="#" tabindex="1"><img src="sales.png" alt="">SALES</a><img class ="close" src="trans.gif" alt="">
	   <ul>
		  <li><a href="#">Digital SLR Cameras</a></li>
		  <li><a href="#">Interchangeable Lenses</a></li>
		  <li><a href="#">Flash Guns and Accessories</a></li>
		  <li><a href="#">Professional Tripods</a></li>
		  <li><a class ="lastLink" href="#">Filters &amp; Lens Hoods</a></li>
	   </ul>
    </li>
    <li><a class ="sub" href="#" tabindex="1"><img src="services.png" alt="">SERVICES</a><img class ="close" src="trans.gif" alt="">
	   <ul>
		  <li><a href="#">Printing &amp; Framing</a></li>
		  <li><a href="#">Photo Editing</a></li>
		  <li><a class ="lastLink" href="#">Storage &amp; Backup</a></li>
	   </ul>
    </li>
    <li><a class ="sub" href="#" tabindex="1"><img src="contacts.png" alt="">CONTACTS</a><img class ="close" src="trans.gif" alt="">
	   <ul>
		  <li><a href="#">Support</a></li>
		  <li><a href="#">Sales</a></li>
		  <li><a href="#">Buying</a></li>
		  <li><a href="#">Photographers</a></li>
		  <li><a href="#">Stockist</a></li>
		  <li><a class ="lastLink" href="#">General</a></li>
	   </ul>
    </li>
    <li><a class ="sub" href="#" tabindex="1"><img src="stores.png" alt="">STORES LOCATION</a>
<img class ="close" src="trans.gif" alt="">
	   <ul>
		  <li><a href="#">South West Region</a></li>
		  <li><a href="#">North East Region</a></li>
		  <li><a class ="lastLink" href="#">Central Region</a></li>
	   </ul>
    </li>
    <li><a class ="sub" href="#" tabindex="1"><img src="contact.png" alt="">CONTACT US</a><img class ="close" src="trans.gif" alt="">
	   <ul>
		  <li><a href="#">Email Addresses</a></li>
		  <li><a href="#">By Post</a></li>
		  <li><a href="#">Telephone Numbers</a></li>
		  <li><a class ="lastLink" href="#">Facsimile</a></li>
	   </ul>
    </li>
    <li><a href="#"><img src="privacy.png" alt="">PRIVACY POLICY</a></li>
</ul>
</div>
<br><br><br><br>