<style type="text/css">
.menu {position:relative;width:750px; height:35px; background:#ddd; z-index:10; font-family: arial, sans-serif;
-o-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.menu, .menu ul {padding:0; margin:0; list-style:none;}
.menu li.main {float:left;}
.menu li.main > a {display:block; padding:0 10px; color:#000; text-decoration:none; font:bold 12px/35px arial, sans-serif;}
.menu .holder {position:absolute; top:35px; left:-9999px; width:750px; padding:10px 0; z-index:10; text-align:center;}
.menu .holder .back {position:absolute; left:0; top:0; width:750px; height:100%; background:#000; opacity:0;
-o-border-radius: 0 0 8px 8px;
-ms-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin:0 0;
-ms-transform-origin:0 0;
-o-transform-origin:0 0;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-moz-transition: -moz-transform 0.25s linear;
-ms-transition: -ms-transform 0.25s linear;
-o-transition: -o-transform 0.25s linear;
-webkit-transition: -webkit-transform 0.25s linear;
transition: transform 0.25s linear;
}
div.framey {display:inline-block; background:#fff; padding:10px;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-o-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
-moz-transition: -moz-transform 0s linear 0s;
-ms-transition: -ms-transform 0s linear 0s;
-o-transition: -o-transform 0s linear 0s;
-webkit-transition: -webkit-transform 0.5s linear 0s;
transition: transform 0s linear 0s;
}
div.framey {*display:inline;}
div.framex {display:inline-block; position:relative;
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
transform: scaleX(0.1);
-moz-transition: -moz-transform 0s linear 0s;
-ms-transition: -ms-transform 0s linear 0s;
-o-transition: -o-transform 0s linear 0s;
-webkit-transition: -webkit-transform 0s linear 0s;
transition: transform 0s linear 0s;
}
div.framex {*display:inline;}
.menu .holder .framex .subContent {opacity:0; margin:0 auto;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.menu li.main:hover {direction:ltr;}
.menu li.main:hover > a {color:#fff; background:#808080;
-o-border-radius: 8px 8px 0 0;
-ms-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
} 
.menu li.main:hover .holder {left:0;}
.menu li.main:hover .holder .back {left:0; opacity:0.5; filter: alpha(opacity=50);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 -moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
-moz-transition: -moz-transform 0.25s linear;
-ms-transition: -ms-transform 0.25s linear;
-o-transition: -o-transform 0.25s linear;
-webkit-transition: -webkit-transform 0.25s linear;
transition: transform 0.25s linear;
}
.menu li.main:hover .holder .framex {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition: -moz-transform 0.5s linear 0.75s;
-ms-transition: -ms-transform 0.5s linear 0.75s;
-o-transition: -o-transform 0.5s linear 0.75s;
-webkit-transition: -webkit-transform 0.5s linear 0.75s;
transition: transform 0.5s linear 0.75s;
}
.menu li.main:hover .holder .framey {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transition: -moz-transform 0.5s linear 0.25s;
-ms-transition: -ms-transform 0.5s linear 0.25s;
-o-transition: -o-transform 0.5s linear 0.25s;
-webkit-transition: -webkit-transform 0.5s linear 0.25s;
transition: transform 0.5s linear 0.25s;
}
.menu li.main:hover .holder .framey .subContent {
opacity:1;
-webkit-transition-delay: 1.25s;
-moz-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
-o-transition-delay: 1.25s;
transition-delay: 1.25s;
}
ul.sub {text-align:left;}
ul.sub h5 {padding:5px 0 0 0; margin:0; color:#ff8000; font-size:12px; width:140px; line-height:20px;}
ul.sub li.sub {width:150px; float:left;}
ul.sub li.bottomLine {clear:left; padding-top:5px;}
ul.sub li.bottomLine p {font:bold 12px/18px arial, sans-serif; padding:0; margin:0;}
ul.sub li.sub ul li a {font:bold 12px/18px arial, sans-serif; color:#000; text-decoration:none; padding:0 10px 0 0;}
ul.sub li.sub ul li a:hover {text-decoration:underline;}
</style>
<ul class ="menu">
    <li class ="main"><a href="#url1">HOME</a></li>
    <li class ="main"><a href="#url1">COLLECTIONS</a>
	   <div class ="holder">
		  <div class ="back"></div>
		  <div class ="framex">
		  <div class ="framey">
			 <div class ="subContent">
				<ul class ="sub">
				    <li class ="sub">
					   <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>
					   </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 class ="sub">
					   <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 class ="sub">
					   <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="http://www.cssplay.co.uk/menus/index.html">online store</a> for more bargains and special offers . . .</p>
					   <p><a href="#url">Free delivery</a> on orders over £100.</p>
				    </li>
				</ul>
			 </div>
		  </div>
		  </div>
	   </div>
    </li>
    <li class ="main"><a href="#url1">MAIL ORDER</a>
	   <div class ="holder">
		  <div class ="back"></div>
		  <div class ="framex">
		  <div class ="framey">
			 <div class ="subContent">
				<ul class ="sub">
				    <li class ="sub">
					   <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>
					   <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 class ="sub">
					   <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>
			 </div>
		  </div>
		  </div>
	   </div>
    </li>
    <li class ="main"><a href="#url1">SPECIAL OFFERS</a>
	   <div class ="holder">
		  <div class ="back"></div>
		  <div class ="framex">
		  <div class ="framey">
			 <div class ="subContent">
				<ul class ="sub">
				    <li class ="sub">
					   <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>
					   <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>
			 </div>
		  </div>
		  </div>
	   </div>
    </li>
    <li class ="main"><a href="#url1">ACCESSORIES</a>
	   <div class ="holder">
		  <div class ="back"></div>
		  <div class ="framex">
		  <div class ="framey">
			 <div class ="subContent">
				<ul class ="sub">
				    <li class ="sub">
					   <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>
					   <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>
				    </li>
				    <li class ="sub">
					   <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">Party</a></li>
						  <li><a href="#url">Silver</a></li>
						  <li><a href="#url">Gold</a></li>
						  <li><a href="#url">Stud</a></li>
					   </ul>
				    </li>
				    <li class ="sub">
					   <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 ="sub">
					   <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 class ="bottomLine">
					   <p>Why not treat yourself to a <a href="#url">makeover</a> in our cosmetic department.</p>
				    </li>
				</ul>
			 </div>
		  </div>
		  </div>
	   </div>
    </li>
    <li class ="main"><a href="#url1">CONTACT US</a></li>
    <li class ="main"><a href="#url1">WHERE TO FIND US</a></li>
</ul>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>