<style type="text/css">
/* this is a CSS answer to fix the hover tilde problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
/* trigger for IE */
#menu li a.sub, body {behavior:url(triggerx.htc)}
#menu {border:5px solid #099; border-width:12px 3px; font-family:arial, sans-serif;
border-radius:12px 12px 12px 12px;}
#menu, #menu ul {padding:0; margin:0 auto; list-style:none; width:180px;}
#menu ul {position:relative; z-index:-1;}
#menu li {position:relative; position:relative; z-index:100;}
#menu ul li {margin-top:-23px;
-moz-transition:  0.5s linear 0.5s;
-ms-transition: 0.5s linear 0.5s;
-o-transition: 0.5s linear 0.5s;
-webkit-transition: 0.5s linear 0.5s;
transition: 0.5s linear 0.5s;
}
#menu li a {display:block; width:165px; padding-left:15px; background:#000; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; 
line-height:25px; outline:0;}
#menu li a.sub {background: #000 url(down.gif);}
#menu li a + img {display:block; width:180px; height:25px; position:absolute; left:0; top:0; display:none; cursor:pointer;}
#menu li a:hover {background-color:#099;}
#menu ul li a {background:#eee; color:#000; font-size:11px; line-height:22px; border-bottom:1px solid #ccc;}
#menu ul li a:hover {background:#ddd; color:#666;}
#menu a.sub:focus {outline:0;background:#099;}
#menu a:focus ~ ul li {margin-top:0;
-moz-transition:  0.5s linear;
-ms-transition: 0.5s linear;
-o-transition: 0.5s linears;
-webkit-transition: 0.5s linears;
transition: 0.5s linear;
}
#menu a:focus + img {display:block;}
#menu a.sub:active {outline:0;background:#099;}
#menu a:active ~ ul li {margin-top:0;}
#menu a:active + img {display:block;}
#menu ul:hover li {margin-top:0;}
</style>
<br><br>
<ul id="menu">
    <li><a href="#">HOME</a></li>
    <li><a href="#">PRIVACY POLICY</a></li>
    <li><a class ="sub p1" href="#" tabindex="1">SALES</a><img src="up.gif" alt="">
	   <ul class ="u1">
		  <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 href="#">Filters &amp; Lens Hoods</a></li>
	   </ul>
    </li>
    <li><a class ="sub p2" href="#" tabindex="1">SERVICES</a><img src="up.gif" alt="">
	   <ul class ="u2">
		  <li><a href="#">Printing &amp; Framing</a></li>
		  <li><a href="#">Photo Editing</a></li>
		  <li><a href="#">Storage &amp; Backup</a></li>
	   </ul>
    </li>
    <li><a class ="sub p3" href="#" tabindex="1">CONTACTS</a><img src="up.gif" alt="">
	   <ul class ="u3">
		  <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 href="#">General</a></li>
	   </ul>
    </li>
    <li><a class ="sub p4" href="#" tabindex="1">STORES LOCATION</a><img src="up.gif" alt="">
	   <ul class ="u4">
		  <li><a href="#">South West Region</a></li>
		  <li><a href="#">North East Region</a></li>
		  <li><a href="#">Central Region</a></li>
	   </ul>
    </li>
    <li><a class ="sub p5" href="#" tabindex="1">CONTACT US</a><img src="up.gif" alt="">
	   <ul class ="u5">
		  <li><a href="#">Email Addresses</a></li>
		  <li><a href="#">By Post</a></li>
		  <li><a href="#">Telephone Numbers</a></li>
		  <li><a href="#">Facsimile</a></li>
	   </ul>
    </li>
</ul>
<br><br><br><br>