<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;}
}
#menuOuter {position:relative; height:300px; width:150px; margin:0 auto;}
/* for Internet Explorer to force a menu refresh after :active + ul */
#menu li a,
body {behavior:url(trigger.htc)}
/* general styling */
#menu, #menu ul {padding:0; margin:0; list-style:none; width:150px;}
#menu {padding:10px 0; background:#069; border:5px solid #036; position:absolute; bottom:0;
-ms-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-reflect: below 3px -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,0.5)), to(transparent));
}
#menu li {display:inline;}
#menu li {*float:left;} /* for IE7 to remove the vertical gap between list items */
#menu li a {display:block; width:150px; line-height:30px; background:#069; color:#fff; text-decoration:none; 
font-family:arial, sans-serif; font-size:13px; text-align:center; font-weight:bold; outline:0;}
#menu li:hover > a {background:#036;
-ms-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#menu ul {background:#69c; height:0; overflow:hidden;
-ms-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
}
#menu ul li a {background:#69c; font-weight:normal; font-size:12px;}
#menu ul li a:hover {background:#58b;
-ms-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#menu li a:active {background:#036;
-ms-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#menu li a:active + ul {padding:0 0 10px 0;}
#menu li a:active + ul.sub3 {height:90px;}
#menu li a:active + ul.sub4 {height:120px;}
#menu li a:active + ul.sub5 {height:150px;}
#menu li a:focus {background:#036;
-ms-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
#menu li a:focus + ul {padding:0 0 10px 0;}
#menu li a:focus + ul.sub3 {height:90px;}
#menu li a:focus + ul.sub4 {height:120px;}
#menu li a:focus + ul.sub5 {height:150px;}
#menu li ul:hover {padding:0 0 10px 0;}
#menu li ul.sub3:hover {height:90px;}
#menu li ul.sub4:hover {height:120px;}
#menu li ul.sub5:hover {height:150px;}
</style>
<br><br>
<div id="menuOuter">
    <ul id="menu">
	   <li><a href="#urla" tabindex="1">Home</a></li>
	   <li><a href="#url" tabindex="1">Products</a>
		  <ul class ="sub4">
			 <li><a href="#urlb">Digital Cameras</a></li>
			 <li><a href="#urlc">Monopods &amp; Tripods</a></li>
			 <li><a href="#urld">Flashguns &amp; Reflectors</a></li>
			 <li><a href="#urle">Telephoto Lenses</a></li>
		  </ul>
	   </li>
	   <li><a href="#url" tabindex="1">Services</a>
		  <ul class ="sub5">
			 <li><a href="#urlf">Enlarging</a></li>
			 <li><a href="#urlg">Framing &amp; Restoring</a></li>
			 <li><a href="#urlh">Printing</a></li>
			 <li><a href="#urli">Copying</a></li>
			 <li><a href="#urlj">Sepia Toning</a></li>
		  </ul>
	   </li>
	   <li><a href="#url" tabindex="1">Outlets</a>
		  <ul class ="sub4">
			 <li><a href="#urlk">London</a></li>
			 <li><a href="#urll">Gloucestershire</a></li>
			 <li><a href="#urlm">East Midlands</a></li>
			 <li><a href="#urln">Glasgow</a></li>
		  </ul>
	   </li>
	   <li><a href="#url" tabindex="1">Terms</a>
		  <ul class ="sub3">
			 <li><a href="#urlo">Payment Methods</a></li>
			 <li><a href="#urlp">Conditions of Sale</a></li>
			 <li><a href="#urlq">Privacy Policy</a></li>
		  </ul>
	   </li>
    </ul>
</div>