<style type="text/css">
.dropline {padding:0; margin:50px auto; list-style:none; height:50px; text-align:center; width:750px; position:relative; z-index:100; 
font-family:arial, sans-serif; font-size:12px; position:relative; background:#fff; box-shadow:0 15px 10px -13px rgba(0,0,0,0.6);}
.dropline li {display:inline-block;}
.dropline li {*display:inline;}
.dropline li a {display:block; float:left; line-height:50px; padding:0 10px; background:#09c; color:#fff; text-decoration:none; 
font-weight:bold; border-radius:10px 10px 0 0;}
.dropline li a:hover {color:#000;}
.dropline li a.sub {border-radius:10px 0 0 0; border-right:1px solid #036;}
.dropline ul {padding:0; margin:0; list-style:none; position:absolute; left:0px; width:750px; top:50px; text-align:center; height:0; 
background:transparent; z-index:10; overflow:hidden;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.dropline ul li a {background:transparent; color:#666; font-size:15px; margin-top:-50px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.dropline ul li a:hover {color:#c00;}
input.pop {position:absolute; left:-9999px;}
label.open {display:inline-block; width:30px; height:50px; background:#09c; margin:0; padding:0; position:relative; border-radius:0 10px 0 0; 
border-left:1px solid #6cf;}
label.close {display:none; width:30px; height:50px; background:#c00; margin:0; padding:0; position:relative; border-radius:0 10px 0 0; 
border-left:1px solid #e00;}
input#pop1:checked ~ .dropline li.p1 ul {height:50px;}
input#pop2:checked ~ .dropline li.p2 ul {height:50px;}
input#pop3:checked ~ .dropline li.p3 ul {height:50px;}
input#pop4:checked ~ .dropline li.p4 ul {height:50px;}
input#pop5:checked ~ .dropline li.p5 ul {height:50px;}
input#pop1:checked ~ .dropline li.p1 ul li a {margin-top:0;}
input#pop2:checked ~ .dropline li.p2 ul li a {margin-top:0;}
input#pop3:checked ~ .dropline li.p3 ul li a {margin-top:0;}
input#pop4:checked ~ .dropline li.p4 ul li a {margin-top:0;}
input#pop5:checked ~ .dropline li.p5 ul li a {margin-top:0;}
input#pop1:checked ~ .dropline li.p1 label.open {display:none;}
input#pop2:checked ~ .dropline li.p2 label.open {display:none;}
input#pop3:checked ~ .dropline li.p3 label.open {display:none;}
input#pop4:checked ~ .dropline li.p4 label.open {display:none;}
input#pop5:checked ~ .dropline li.p5 label.open {display:none;}
input#pop1:checked ~ .dropline li.p1 label.close {display:inline-block;}
input#pop2:checked ~ .dropline li.p2 label.close {display:inline-block;}
input#pop3:checked ~ .dropline li.p3 label.close {display:inline-block;}
input#pop4:checked ~ .dropline li.p4 label.close {display:inline-block;}
input#pop5:checked ~ .dropline li.p5 label.close {display:inline-block;}
</style>
<input name="pop" id="pop1" class ="pop" type="radio">
<input name="pop" id="pop2" class ="pop" type="radio">
<input checked="checked" name="pop" id="pop3" class ="pop" type="radio">
<input name="pop" id="pop4" class ="pop" type="radio">
<input name="pop" id="pop5" class ="pop" type="radio">
<input name="pop" id="pop6" class ="pop" type="radio">
<ul class ="dropline">
    <li><a href="#">HOME</a></li>
    <li class ="p1"><a href="#" class ="sub">PRODUCTS</a><label for="pop1" class ="open" accesskey="2"><img src="down.png" alt="">
</label><label for="pop6" class ="close" accesskey="3"><img src="up.png" alt=""></label>
	   <ul>
		  <li><a href="#">Cameras</a></li>
		  <li><a href="#">Lenses</a></li>
		  <li><a href="#">Flashguns</a></li>
		  <li><a href="#">Tripods</a></li>
		  <li><a href="#">Filters</a></li>
		  <li><a href="#">Lens Adaptors</a></li>
	   </ul>
    </li>
    <li class ="p2"><a href="#" class ="sub">SERVICES</a><label for="pop2" class ="open" accesskey="4"><img src="down.png" alt="">
</label><label for="pop6" class ="close" accesskey="5"><img src="up.png" alt=""></label>
	   <ul>
		  <li><a href="#">Printing</a></li>
		  <li><a href="#">Servicing</a></li>
		  <li><a href="#">Repair</a></li>
		  <li><a href="#">Photo Editing</a></li>
		  <li><a href="#">Photo Framing</a></li>
	   </ul>
    </li>
    <li class ="p3"><a href="#" class ="sub">SHOP</a><label for="pop3" class ="open" accesskey="6"><img src="down.png" alt=""></label>
<label for="pop6" class ="close" accesskey="7"><img src="up.png" alt=""></label>
	   <ul>
		  <li><a href="#">Online Shopping</a></li>
		  <li><a href="#">Mail Order</a></li>
		  <li><a href="#">Store Finder</a></li>
		  <li><a href="#">Second Hand &amp; Refurbished Offers</a></li>
	   </ul>
    </li>
    <li class ="p4"><a href="#" class ="sub">SPECIAL DEALS</a><label for="pop4" class ="open" accesskey="8"><img src="down.png" alt="">
</label><label for="pop6" class ="close" accesskey="9"><img src="up.png" alt=""></label>
	   <ul>
		  <li><a href="#">Tripods</a></li>
		  <li><a href="#">Filters</a></li>
		  <li><a href="#">Lenses</a></li>
		  <li><a href="#">Flashguns</a></li>
		  <li><a href="#">Cameras</a></li>
	   </ul>
    </li>
    <li class ="p5"><a href="#" class ="sub">CONTACT US</a><label for="pop5" class ="open" accesskey="W"><img src="down.png" alt="">
</label><label for="pop6" class ="close" accesskey="X"><img src="up.png" alt=""></label>
	   <ul>
		  <li><a href="#">Email</a></li>
		  <li><a href="#">Post</a></li>
		  <li><a href="#">Fax</a></li>
		  <li><a href="#">Telephone</a></li>
		  <li><a href="#">SMS</a></li>
	   </ul>
    </li>
    <li><a href="#">FORUM</a></li>
</ul>