<style type="text/css">
ul.menu,
ul.menu ul {padding:0; margin:0; list-style:none; position:relative; width:200px; background:#ddd; font-family:arial, sans-serif;}
ul.menu {z-index:100; padding:10px; border-radius:10px 10px 0 0; margin:0 auto;}
ul.menu ul {z-index:50; background:#ddd; border-radius:0 0 10px 10px; padding-bottom:0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.menu li {line-height:30px; position:relative; text-indent:10px;}
ul.menu > li {margin-top:2px; font-size:12px;}
ul.menu > li a {font:bold 12px/30px arial, sans-serif; color:#fff; text-decoration:none;}
ul.menu label.open {display:block; background:#c00 url(d-arrow.gif) no-repeat 170px 12px; line-height:30px; position:relative; 
z-index:100; font:bold 12px/30px arial, sans-serif; color:#fff; border-radius:10px 10px 0 0;}
ul.menu label.open b {color:#ff0;}
ul.menu span {display:block; background:#c00; line-height:30px; position:relative; z-index:100; border-radius:10px 10px 0 0;}
ul.menu label img {position:absolute; left:0; top:0; width:100%; height:30px;}
ul.menu ul li {margin-top:-30px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.menu ul li a {display:block; font:normal 11px/30px arial, sans-serif; color:#000; background:#ccc;}
ul.menu ul li a:hover {background:#ddd;}
ul.menu input {position:absolute; left:-9999px;}
ul.menu li input:checked + label {background:#069;}
ul.menu li input:checked ~ ul {background:#ccc; padding-bottom:10px;}
ul.menu li input:checked ~ ul li {margin-top:0;}
ul.menu label.close {display:block; width:200px; height:30px; background:transparent url(u-arrow.gif) no-repeat 170px 12px; 
line-height:30px; position:relative; left:0; z-index:90; margin-top:-30px}
ul.menu input.tabs:checked ~ label.close {display:block; z-index:200;}
ul.menu input.close:checked + label.close {display:none;}
ul.menu input.close:checked ~ ul {background:#ddd; padding-bottom:0;}
ul.menu input.close:checked ~ ul li {margin-top:-30px;}
</style>
<ul class ="menu">
    <li><a href="#"><span>HOME</span></a></li>
    <li><input checked="checked" name="tab1" id="tab1a" class ="tabs" type="radio"><label for="tab1a" class ="open" accesskey="2">
<img src="trans.gif" alt="">SALES [2] <b>[3]</b></label>
	   <input name="tab1" id="tab1ac" class ="tabs close" type="radio"><label for="tab1ac" class ="close" accesskey="3">
<img src="trans.gif" alt=""></label>
	   <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 href="#">Filters &amp; Lens Hoods</a></li>
	   </ul>
    </li>
    <li><input name="tab1" id="tab1b" class ="tabs" type="radio"><label for="tab1b" class ="open" accesskey="4">
<img src="trans.gif" alt="">SERVICES [4] <b>[5]</b></label>
	   <input name="tab1" id="tab1bc" class ="tabs close" type="radio"><label for="tab1bc" class ="close" accesskey="5">
<img src="trans.gif" alt=""></label>
	   <ul>
		  <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><input name="tab1" id="tab1c" class ="tabs" type="radio"><label for="tab1c" class ="open" accesskey="6">
<img src="trans.gif" alt="">CONTACTS [6] <b>[7]</b></label>
	   <input name="tab1" id="tab1cc" class ="tabs close" type="radio"><label for="tab1cc" class ="close" accesskey="7">
<img src="trans.gif" alt=""></label>
	   <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 href="#">General</a></li>
	   </ul>
    </li>
    <li><input name="tab1" id="tab1d" class ="tabs" type="radio"><label for="tab1d" class ="open" accesskey="8">
<img src="trans.gif" alt="">STORES LOCATION [8] <b>[9]</b></label>
	   <input name="tab1" id="tab1dc" class ="tabs close" type="radio"><label for="tab1dc" class ="close" accesskey="9">
<img src="trans.gif" alt=""></label>
	   <ul>
		  <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><input name="tab1" id="tab1e" class ="tabs" type="radio"><label for="tab1e" class ="open" accesskey="F">
<img src="trans.gif" alt="">CONTACT US  [F] <b>[G]</b></label>
	   <input name="tab1" id="tab1ec" class ="tabs close" type="radio"><label for="tab1ec" class ="close" accesskey="G">
<img src="trans.gif" alt=""></label>
	   <ul>
		  <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>
    <li><a href="#"><span>PRIVACY POLICY</span></a></li>
</ul>