<style type="text/css">
.nav {padding:0; margin:0; list-style:none; font-family:arial, sans-serif; font-size:13px; height:40px; float:left; position:relative; z-index:100; 
margin-right:1px;}
.first {margin-left:10px;}
.nav li {float:left; position:relative;}
.nav li.close {width:30px; height:40px; position:absolute; right:0; top:0; z-index:-1;}
.nav li.close a {display:block; width:30px; height:40px; background:url(up.gif);}
.nav li.close a b {position:absolute; left:-9999px;}
.nav li a.top-a {text-decoration:none; white-space:nowrap; display:block; padding:0 10px; cursor:pointer; height:40px; line-height:40px; 
float:left; font-weight:normal; color:#fff; background:url(background.gif) no-repeat top left;}
.nav li div.arrow {float:left; cursor:pointer; width:30px; height:40px; font-weight:normal; background:url(background.gif) no-repeat top right;}
.nav li.nosub a {padding:0 0 0 10px;}
.nav li.nosub b {display:block; width:10px; height:40px; float:left; background:url(background.gif) no-repeat top right;}
.nav div.inner {position:absolute; left:0; top:40px; height:0; width:174px; overflow:hidden;
-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;}
.nav li div.arrow:hover div.line1 {height:32px;}
.nav li div.arrow:hover div.line2 {height:52px;}
.nav li div.arrow:hover div.line3 {height:72px;}
.nav li div.arrow:hover div.line4 {height:92px;}
.nav li div.arrow:hover div.line5 {height:112px;}
.nav li div.arrow:hover div.line6 {height:132px;}
.nav li div.arrow:hover div ul {top:0;}
/* for IE6 only */
.nav table {border-collapse:collapse; padding:0; margin:0 -20px -1px 0; position:absolute; left:0; top:0;}
.nav li a.sub-a {display:block; float:left; width:30px; height:40px;} 
.nav li a.sub-a:hover {direction:ltr;}
.nav li a.sub-a:hover div.line1 {height:32px;}
.nav li a.sub-a:hover div.line2 {height:52px;}
.nav li a.sub-a:hover div.line3 {height:72px;}
.nav li a.sub-a:hover div.line4 {height:92px;}
.nav li a.sub-a:hover div.line5 {height:112px;}
.nav li a.sub-a:hover div.line6 {height:132px;}
.nav li a.sub-a:hover ul {top:0;}
/* end for IE6 only */
.nav li ul {padding:2px 2px 10px 2px; margin:0; list-style:none; background:url(background.gif) no-repeat bottom left; width:0; 
position:absolute; width:170px;
-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;
}
.nav li div.line1 ul {top:-32px;}
.nav li div.line2 ul {top:-52px;}
.nav li div.line3 ul {top:-72px;}
.nav li div.line4 ul {top:-92px;}
.nav li div.line5 ul {top:-112px;}
.nav li div.line6 ul {top:-132px;}
.nav li ul li {float:none; width:170px; margin:0; height:20px;}
.nav li ul li a {display:block; text-decoration:none; height:20px; line-height:20px; padding:0 5px; background-image:none; 
color:#fff; font-size:12px; width:160px;}
.nav li ul li a:hover {background:#20bffc;}
</style>
<style media="only screen and (max-device-width:768px)" type="text/css">
/* for iPhone, iPod Touch and iPad */
.nav a.iPad {display:block; width:30px; height:40px; margin-bottom:-40px;}
.nav a.iPad:hover + div.line1 {height:32px;}
.nav a.iPad:hover + div.line2 {height:52px;}
.nav a.iPad:hover + div.line3 {height:72px;}
.nav a.iPad:hover + div.line4 {height:92px;}
.nav a.iPad:hover + div.line5 {height:112px;}
.nav a.iPad:hover + div.line6 {height:132px;}
.nav a.iPad:hover + div ul {top:0;}
.nav li.liTop:hover + li.close {z-index:100;}
</style>
<br>
<ul class ="nav first">
    <li class ="nosub"><a class ="top-a" href="#url">Home</a><b></b></li>
</ul>
<ul class ="nav">
    <li class ="liTop"><a class ="top-a" href="#url">Sales</a>
    <div class ="arrow"><a class ="iPad" href="#url"></a>
    <!--[if lte IE 6]><a class ="sub-a" href="#url"><table><tr><td><![endif]-->
    <div class ="inner line5">
	   <ul>
		  <li><a href="#url">Digital SLR Cameras</a></li>
		  <li><a href="#url">Interchangeable Lenses</a></li>
		  <li><a href="#url">Flash Guns and Accessories</a></li>
		  <li><a href="#url">Professional Tripods</a></li>
		  <li><a href="#url">Filters &amp; Lens Hoods</a></li>
	   </ul>
    </div>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </div>
    </li>
    <li class ="close"><a href="#url"><b>Close</b></a></li>
</ul>
<ul class ="nav">
    <li class ="liTop"><a class ="top-a" href="#url">Services</a>
    <div class ="arrow"><a class ="iPad" href="#url"></a>
    <!--[if lte IE 6]><a class ="sub-a" href="#url"><table><tr><td><![endif]-->
    <div class ="inner line3">
	   <ul>
		  <li><a href="#url">Printing &amp; Framing</a></li>
		  <li><a href="#url">Photo Editing</a></li>
		  <li><a href="#url">Storage &amp; Backup</a></li>
	   </ul>
    </div>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </div>
    </li>
    <li class ="close"><a href="#url"><b>Close</b></a></li>
</ul>
<ul class ="nav">
    <li class ="liTop"><a class ="top-a" href="#url">Contacts</a>
    <div class ="arrow"><a class ="iPad" href="#url"></a>
    <!--[if lte IE 6]><a class ="sub-a" href="#url"><table><tr><td><![endif]-->
    <div class ="inner line6">
	   <ul>
		  <li><a href="#url">Support</a></li>
		  <li><a href="#url">Sales</a></li>
		  <li><a href="#url">Buying</a></li>
		  <li><a href="#url">Photographers</a></li>
		  <li><a href="#url">Stockist</a></li>
		  <li><a href="#url">General</a></li>
	   </ul>
    </div>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </div>
    </li>
    <li class ="close"><a href="#url"><b>Close</b></a></li>
</ul>
<ul class ="nav">
    <li class ="liTop"><a class ="top-a" href="#url">Stores Location</a>
    <div class ="arrow"><a class ="iPad" href="#url"></a>
    <!--[if lte IE 6]><a class ="sub-a" href="#url"><table><tr><td><![endif]-->
    <div class ="inner line3">
	   <ul>
		  <li><a href="#url">South West Region</a></li>
		  <li><a href="#url">North East Region</a></li>
		  <li><a href="#url">Central Region</a></li>
	   </ul>
    </div>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </div>
    </li>
    <li class ="close"><a href="#url"><b>Close</b></a></li>
</ul>
<ul class ="nav">
    <li class ="liTop"><a class ="top-a" href="#url">Contact Us</a>
    <div class ="arrow"><a class ="iPad" href="#url"></a>
    <!--[if lte IE 6]><a class ="sub-a" href="#url"><table><tr><td><![endif]-->
    <div class ="inner line3">
	   <ul>
		  <li><a href="#url">Email Addresses</a></li>
		  <li><a href="#url">By Post</a></li>
		  <li><a href="#url">Telephone Numbers</a></li>
	   </ul>
    </div>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </div>
    </li>
    <li class ="close"><a href="#url"><b>Close</b></a></li>
</ul>
<ul class ="nav">
    <li class ="nosub"><a class ="top-a" href="#url">Privacy Policy</a><b></b></li>
</ul>
<br><br><br><br><br><br><br><br><br><br><br><br>