<style type="text/css">
/* fix for the iPad/iPhone/iPod Touch :active: with sibling selectors */
.menu:active {}
.menu, .menu ul {padding:0; margin:0; list-style:none; position:relative;}
.menu {width:726px; margin:0 auto;}
.menu li {float:left; width:120px; height:35px; position:relative; margin-right:1px;}
.menu li a {display:block; height:34px; width:110px; padding-left:10px; margin-bottom:1px; color:#000; 
font:bold 12px/34px arial, sans-serif; text-decoration:none; background:#ddd; border-radius: 8px; outline:0;}
.menu li a.hasSibling {background:#ddd url(arrow.gif) no-repeat 100px center;}
.menu ul li {margin-top:-35px;}
.menu li a + img {width:120px; height:34px; position:absolute; left:0; top:0; display:none; cursor:pointer;}
.menu li a:active,
.menu li a:focus {background-color:#6cf;}
.menu li a.hasSibling:active,
.menu li a.hasSibling:focus {background:#6cf url(arrow-up.gif) no-repeat 100px center;;}
.menu {z-index:100;}
.menu > li {z-index:20;}
.menu > li > a {z-index:100;}
.menu > li ul {z-index:-1;}
.menu ul li:nth-of-type(1) {z-index:20;
-moz-transition: 0.1s linear 0.5s;
-ms-transition: 0.1s linear 0.5s;
-o-transition: 0.1s linear 0.5s;
-webkit-transition: 0.1s linear 0.5s;
transition: 0.1s linear 0.5s;
}
.menu ul li:nth-of-type(2) {z-index:19;
-moz-transition: 0.1s linear 0.4s;
-ms-transition: 0.1s linear 0.4s;
-o-transition: 0.1s linear 0.4s;
-webkit-transition: 0.1s linear 0.4s;
transition: 0.1s linear 0.4s;
}
.menu ul li:nth-of-type(3) {z-index:18;
-moz-transition: 0.1s linear 0.3s;
-ms-transition: 0.1s linear 0.3s;
-o-transition: 0.1s linear 0.3s;
-webkit-transition: 0.1s linear 0.3s;
transition: 0.1s linear 0.3s;
}
.menu ul li:nth-of-type(4) {z-index:17;
-moz-transition: 0.1s linear 0.2s;
-ms-transition: 0.1s linear 0.2s;
-o-transition: 0.1s linear 0.2s;
-webkit-transition: 0.1s linear 0.2s;
transition: 0.1s linear 0.2s;
}
.menu ul li:nth-of-type(5) {z-index:16;
-moz-transition: 0.1s linear 0.1s;
-ms-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
-webkit-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.menu ul li:nth-of-type(6) {z-index:15;
-moz-transition: 0.1s linear 0s;
-ms-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
-webkit-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.menu li a:active ~ ul li,
.menu li a:focus ~ ul li {margin-top:0;}
.menu li a:active + img,
.menu li a:focus + img {display:block;}
.menu li a:active ~ ul li:nth-of-type(1),
.menu li a:focus ~ ul li:nth-of-type(1) {margin-top:0;
-moz-transition: 0.1s linear 0s;
-ms-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
-webkit-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.menu li a:active ~ ul li:nth-of-type(2),
.menu li a:focus ~ ul li:nth-of-type(2) {margin-top:0;
-moz-transition: 0.1s linear 0.1s;
-ms-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
-webkit-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.menu li a:active ~ ul li:nth-of-type(3),
.menu li a:focus ~ ul li:nth-of-type(3) {margin-top:0;
-moz-transition: 0.1s linear 0.2s;
-ms-transition: 0.1s linear 0.2s;
-o-transition: 0.1s linear 0.2s;
-webkit-transition: 0.1s linear 0.2s;
transition: 0.1s linear 0.2s;
}
.menu li a:active ~ ul li:nth-of-type(4),
.menu li a:focus ~ ul li:nth-of-type(4) {margin-top:0;
-moz-transition: 0.1s linear 0.3s;
-ms-transition: 0.1s linear 0.3s;
-o-transition: 0.1s linear 0.3s;
-webkit-transition: 0.1s linear 0.3s;
transition: 0.1s linear 0.3s;
}
.menu li a:active ~ ul li:nth-of-type(5),
.menu li a:focus ~ ul li:nth-of-type(5) {margin-top:0;
-moz-transition: 0.1s linear 0.4s;
-ms-transition: 0.1s linear 0.4s;
-o-transition: 0.1s linear 0.4s;
-webkit-transition: 0.1s linear 0.4s;
transition: 0.1s linear 0.4s;
}
.menu li a:active ~ ul li:nth-of-type(6),
.menu li a:focus ~ ul li:nth-of-type(6) {margin-top:0;
-moz-transition: 0.1s linear 0.5s;
-ms-transition: 0.1s linear 0.5s;
-o-transition: 0.1s linear 0.5s;
-webkit-transition: 0.1s linear 0.5s;
transition: 0.1s linear 0.5s;
}
</style>
<br><br>
<ul class ="menu">
    <li><a href="#">Home</a></li>
    <li><a class ="hasSibling" href="#url" tabindex="1">Products</a><img src="blank.gif" alt="">
	   <ul>
		  <li><a href="#">Digital Cameras</a></li>
		  <li><a href="#">Tripods</a></li>
		  <li><a href="#">Flashguns</a></li>
		  <li><a href="#">Lenses</a></li>
	   </ul>
    </li>
    <li><a class ="hasSibling" href="#url" tabindex="1">Services</a><img src="blank.gif" alt="">
	   <ul>
		  <li><a href="#">Enlarging</a></li>
		  <li><a href="#">Framing</a></li>
		  <li><a href="#">Printing</a></li>
		  <li><a href="#">Copying</a></li>
		  <li><a href="#">Sepia Toning</a></li>
	   </ul>
    </li>
    <li><a class ="hasSibling" href="#url" tabindex="1">Outlets</a><img src="blank.gif" alt="">
	   <ul>
		  <li><a href="#">London</a></li>
		  <li><a href="#">Gloucestershire</a></li>
		  <li><a href="#">East Midlands</a></li>
		  <li><a href="#">Glasgow</a></li>
	   </ul>
    </li>
    <li><a class ="hasSibling" href="#url" tabindex="1">Terms</a><img src="blank.gif" alt="">
	   <ul>
		  <li><a href="#">Payment</a></li>
		  <li><a href="#">Conditions</a></li>
		  <li><a href="#">Privacy</a></li>
	   </ul>
    </li>
    <li><a href="#">Site Map</a></li>
</ul>
<div style="height:300px"></div>