<style type="text/css">
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
body, #dropline a,
html {behavior:url(click-dropline/trigger.htc)}
#dropline {height:35px; position:relative; text-align:center; width:750px; margin:0 auto; z-index:100; font-family:arial, sans-serif; 
font-size:12px; position:relative; background:#069;
-ms-border-radius: 35px 25px 0 0;
-moz-border-radius: 35px 35px 0 0;
border-radius: 35px 35px 0 0;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.5)), to(transparent));
}
#dropline, #dropline ul {padding:0; margin:0; list-style:none;}
#dropline li {display:inline;}
#dropline li a {display:inline-block; line-height:35px; padding:0 20px; background:#069; color:#fff; text-decoration:none; font-weight:bold;
-ms-border-radius: 35px 35px 0 0;
-moz-border-radius: 35px 35px 0 0;
border-radius: 35px 35px 0 0;
}
#dropline ul {position:absolute; left:-9999px; width:750px; top:35px; text-align:center; height:35px; background:#69c; display:inline-block;
-ms-border-radius: 0 0 35px 35px;
-moz-border-radius: 0 0 35px 35px;
border-radius: 0 0 35px 35px;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.5)), to(transparent));
}
#dropline ul li a {background:#69c;
-ms-border-radius: 35px 35px 0 0;
-moz-border-radius: 35px 35px 0 0;
border-radius: 35px 35px 0 0;
}
#dropline ul li a:hover {background:#7ad;}
#dropline li a:active {outline:none; background:#69c;}
#dropline li a:active + ul {left:0; border:0;}
#dropline a:focus {outline:0; background:#69c;}
#dropline a:focus + ul {left:0;}
#dropline ul:hover {left:0;}
</style>
<br><br>
<ul id="dropline">
    <li><a href="#url" tabindex="1">HOME</a></li><li><a href="#url" tabindex="1">PRODUCTS</a><ul class ="u1">
		  <li><a href="#url">Cameras</a></li>
		  <li><a href="#url">Lenses</a></li>
		  <li><a href="#url">Flashguns</a></li>
		  <li><a href="#url">Tripods</a></li>
		  <li><a href="#url">Filters</a></li>
		  <li><a href="#url">Lens Adaptors</a></li>
	   </ul>
    </li><li><a href="#url" tabindex="1">SERVICES</a><ul class ="u2">
		  <li><a href="#url">Printing</a></li>
		  <li><a href="#url">Servicing</a></li>
		  <li><a href="#url">Repair</a></li>
		  <li><a href="#url">Photo Editing</a></li>
		  <li><a href="#url">Photo Framing</a></li>
	   </ul>
    </li><li><a href="#url" tabindex="1">SHOP</a><ul class ="u3">
		  <li><a href="#url">Online Shopping</a></li>
		  <li><a href="#url">Mail Order</a></li>
		  <li><a href="#url">Store Finder</a></li>
		  <li><a href="#url">Second Hand &amp; Refurbished Offers</a></li>
	   </ul>
    </li><li><a href="#url" tabindex="1">SPECIAL DEALS</a><ul class ="u4">
		  <li><a href="#url">Tripods</a></li>
		  <li><a href="#url">Filters</a></li>
		  <li><a href="#url">Lenses</a></li>
		  <li><a href="#url">Flashguns</a></li>
		  <li><a href="#url">Cameras</a></li>
	   </ul>
    </li><li><a href="#url" tabindex="1">CONTACT US</a><ul class ="u5">
		  <li><a href="#url">Email</a></li>
		  <li><a href="#url">Post</a></li>
		  <li><a href="#url">Fax</a></li>
		  <li><a href="#url">Telephone</a></li>
		  <li><a href="#url">SMS</a></li>
	   </ul>
    </li><li><a href="#url" tabindex="1">FORUM</a></li>
</ul>
<div style="height:100px"></div>