<style type="text/css">
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
/* for Internet Explorer to force a menu refresh after :active + ul */
#nav li a,
body {behavior:url(cssplay45/trigger.htc)}
#nav {width:744px; height:35px; background:#000; position:relative; border:3px solid #000; border-width:3px 3px 0 3px; 
font-family:arial, sans-serif; z-index:100;}
#nav {margin-bottom:350px; /* this demo only */}
#nav ul.menu {padding:0; margin:0; list-style:none;}
#nav ul.menu > li {float:left;}
#nav ul.menu a.close {display:none;}
#nav ul.menu > li > a {display:block; padding:0 15px; font:bold 13px/35px arial, sans-serif; color:#fff; text-decoration:none;}
#nav ul.menu li.has-sub > a {background: url(cssplay45/arrow.gif) no-repeat right 15px;}
#nav ul.menu > li:hover + a {background:#888; color:#fff;}
#nav ul.menu > li > a:active, #nav ul.menu > li > a:focus {background:#eee; color:#000; outline:0;}
#nav ul.menu > li > ul {padding:0; margin:0; list-style:none; position:absolute; left:-3px; top:35px; width:744px; background:#eee; 
height:0; overflow:hidden;  border:3px solid #000; border-width:0 3px 0 3px; text-align:center;}
#nav ul.menu > li > ul > li {display:inline-block; padding:25px 30px; text-align:left;}
#nav ul.menu > li > ul > li {*display:inline; vertical-align:top;}
#nav ul.menu > li > ul > li.bottomLine {float:none; clear:left; width:750px; padding:5px 30px; border-top:1px solid #666; 
border-bottom:3px solid #000; background:#fff;}
#nav ul.menu > li > ul > li.bottomLine p {padding:0; margin:0; line-height:18px; font-size:13px; color:#069; font-weight:bold;}
#nav ul.menu > li > ul > li.bottomLine p a {color:#000; font-weight:normal; text-decoration:none;}
#nav ul.menu > li > ul > li.bottomLine p a:hover {text-decoration:underline;}
#nav ul.menu > li > a:active ~ ul {height:auto;}
#nav ul.menu > li > a:focus ~ ul {height:auto;}
#nav ul.menu > li > ul:hover {height:auto;}
#nav ul.menu > li > a:active + a.close {display:block; padding:0;line-height:25px; color:#c00; font-size:12px; font-weight:bold; 
position:absolute; z-index:100; width:60px; height:25px; bottom:-25px; right:10px; background:url(cssplay45/close.gif) no-repeat right center;}
#nav ul.menu > li > a + a.close:active {display:none;}
#nav ul.menu > li > a + a.close:active + ul {height:0;}
#nav ul.menu > li > a:focus + a.close {display:block; padding:0;line-height:25px; color:#c00; font-size:12px; font-weight:bold; 
position:absolute; z-index:100; width:60px; height:25px; bottom:-25px; right:10px; background:url(cssplay45/close.gif) no-repeat right center;}
#nav ul.menu > li > a + a.close:focus {display:none;}
#nav ul.menu > li > a + a.close:focus + ul {height:0;}
#nav ul.menu > li > ul:hover + a.close {display:block; padding:0; line-height:25px; color:#c00; font-size:12px; font-weight:bold; 
position:absolute; z-index:100; width:60px; height:25px; bottom:-25px; right:10px; background:url(cssplay45/close.gif) no-repeat right center;}
li.has-sub ul li h5 {padding:0; margin:0; line-height:25px; font-size:13px; color:#069; border-bottom:1px solid #069;}
li.has-sub ul li ul {padding:0; margin:0; list-style:none;}
li.has-sub ul li ul li a {display:block; line-height:20px; font-size:12px; text-decoration:none; color:#000;}
li.has-sub ul li ul li a:hover {text-decoration:underline;}
</style>
<br><br><div id="nav">
    <ul class ="menu">
	   <li><a href="#" tabindex="1">Home</a></li>
	   <li class ="has-sub"><a href="#x" tabindex="2">Collections</a>
		  <a class ="close" href="#x">CLOSE</a>
		  <ul>
			 <li>
				<h5>Dresses</h5>
				<ul>
				    <li><a href="#url">Floral Print</a></li>
				    <li><a href="#url">Sleeveless</a></li>
				    <li><a href="#url">Pure Cotton</a></li>
				    <li><a href="#url">Linen Blend</a></li>
				    <li><a href="#url">Buttoned</a></li>
				</ul>
				<h5>Coats &amp; Jackets</h5>
				<ul>
				    <li><a href="#url">Silk Blend</a></li>
				    <li><a href="#url">Cotton Rich</a></li>
				    <li><a href="#url">Sleeveless</a></li>
				    <li><a href="#url">Pure Linen</a></li>
				</ul>
			 </li>
			 <li>
				<h5>Jeans</h5>
				<ul>
				    <li><a href="#url">Flared denim</a></li>
				    <li><a href="#url">Bootleg</a></li>
				    <li><a href="#url">Cropped</a></li>
				</ul>
				<h5>Knitwear</h5>
				<ul>
				    <li><a href="#url">Cardigans</a></li>
				    <li><a href="#url">Bolero</a></li>
				    <li><a href="#url">Plain long sleeve jumpers</a></li>
				</ul>
				<h5>Socks</h5>
				<ul>
				    <li><a href="#url">Plain Cotton</a></li>
				    <li><a href="#url">Trainer</a></li>
				    <li><a href="#url">Sports</a></li>
				</ul>
			 </li>
			 <li>
				<h5>Shirts &amp; Blouses</h5>
				<ul>
				    <li><a href="#url">Pure Cotton</a></li>
				    <li><a href="#url">Pure Silk</a></li>
				    <li><a href="#url">Floral</a></li>
				</ul>
				<h5>Skirts</h5>
				<ul>
				    <li><a href="#url">Pleated</a></li>
				    <li><a href="#url">Belted</a></li>
				    <li><a href="#url">Panelled</a></li>
				    <li><a href="#url">Pencil</a></li>
				    <li><a href="#url">Flared</a></li>
				</ul>
			 </li>
			 <li class ="bottomLine">
				<p>Visit our <a href="#">online store</a> for more bargains and special offers . . .</p>
				<p><a href="#url">Free delivery</a> on orders over £100.</p>
			 </li>
		  </ul>
		  <a class ="close" href="#x">CLOSE</a>
	   </li>
	   <li class ="has-sub"><a href="#x" tabindex="3">Mail Order</a>
		  <a class ="close" href="#x">CLOSE</a>
		  <ul>
			 <li>
				<h5>Electronics</h5>
				<ul>
				    <li><a href="#url">Televisions</a></li>
				    <li><a href="#url">DVD Players</a></li>
				    <li><a href="#url">Mobiles</a></li>
				    <li><a href="#url">Games Consoles</a></li>
				</ul>
			 </li>
			 <li>
				<h5>Wine</h5>
				<ul>
				    <li><a href="#url">Red</a></li>
				    <li><a href="#url">White</a></li>
				    <li><a href="#url">Rose</a></li>
				    <li><a href="#url">Sparkling</a></li>
				</ul>
			 </li>
			 <li>
				<h5>Furniture</h5>
				<ul>
				    <li><a href="#url">Garden furniture</a></li>
				    <li><a href="#url">Sofas</a></li>
				    <li><a href="#url">Dining chairs</a></li>
				    <li><a href="#url">Beds</a></li>
				</ul>
			 </li>
			 <li class ="bottomLine">
				<p>Special offer on all <a href="#url">Microwaves</a> - 50% OFF!</p>
			 </li>
		  </ul>
		  <a class ="close" href="#x">CLOSE</a>
	   </li>
	   <li class ="has-sub"><a href="#x" tabindex="4">Special Offers</a>
		  <a class ="close" href="#x">CLOSE</a>
		  <ul>
			 <li>
				<h5>Meanswear</h5>
				<ul>
				    <li><a href="#url">Half price shirts</a></li>
				    <li><a href="#url">30% off Suits</a></li>
				    <li><a href="#url">Half price shoes</a></li>
				    <li><a href="#url">2 for 1 Shirts</a></li>
				</ul>
			 </li>
			 <li>
				<h5>Kidswear</h5>
				<ul>
				    <li><a href="#url">Half price shirts</a></li>
				    <li><a href="#url">2 for 1 T shirts</a></li>
				    <li><a href="#url">1/3 off trainers</a></li>
				</ul>
			 </li>
			 <li class ="bottomLine">
				<p>More <a href="#url">offers</a> online.</p>
			 </li>
		  </ul>
		  <a class ="close" href="#x">CLOSE</a>
	   </li>
	   <li class ="has-sub"><a href="#x" tabindex="5">Accessories</a>
		  <a class ="close" href="#x">CLOSE</a>
		  <ul>
			 <li>
				<h5>Scarves</h5>
				<ul>
				    <li><a href="#url">Silk</a></li>
				    <li><a href="#url">Chiffon</a></li>
				    <li><a href="#url">Crinkle</a></li>
				    <li><a href="#url">Butterfly</a></li>
				    <li><a href="#url">Tassel</a></li>
				</ul>
			 </li>
			 <li>
				<h5>Belts</h5>
				<ul>
				    <li><a href="#url">Leather</a></li>
				    <li><a href="#url">Elasticated</a></li>
				    <li><a href="#url">Reversible</a></li>
				</ul>
				<h5>Rings</h5>
				<ul>
				    <li><a href="#url">Diamond</a></li>
				    <li><a href="#url">Pearl</a></li>
				    <li><a href="#url">Emerald</a></li>
				</ul>
			 </li>
			 <li>
				<h5>Necklaces</h5>
				<ul>
				    <li><a href="#url">Pendant</a></li>
				    <li><a href="#url">Pearl</a></li>
				    <li><a href="#url">Drop</a></li>
				</ul>
				<h5>Earrings</h5>
				<ul>
				    <li><a href="#url">Silver</a></li>
				    <li><a href="#url">Gold</a></li>
				    <li><a href="#url">Stud</a></li>
				</ul>
			 </li>
			 <li>
				<h5>Handbags</h5>
				<ul>
				    <li><a href="#url">Shopper</a></li>
				    <li><a href="#url">Tote</a></li>
				    <li><a href="#url">Shoulder</a></li>
				    <li><a href="#url">Beach</a></li>
				    <li><a href="#url">Leather</a></li>
				    <li><a href="#url">Clutch</a></li>
				    <li><a href="#url">Mock Crocodile</a></li>
				</ul>
			 </li>
			 <li class ="bottomLine">
				<p>Why not treat yourself to a <a href="#url">makeover</a> in our cosmetic department.</p>
			 </li>
		  </ul>
		  <a class ="close" href="#x">CLOSE</a>
	   </li>
	   <li><a href="#" tabindex="6">Contact Us</a></li>
	   <li><a href="#" tabindex="7">Where to Find Us</a></li>
    </ul>
</div>