تالار میدوری

<style type="text/css">
.cssplayMega {width:742px; height:40px; margin:0 auto; background:#000; position:relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
-ms-touch-action: none;
}
.cssplayMega ul {padding:0; margin:0; list-style:none;}
.cssplayMega ul li {float:left;}
.cssplayMega li > p span {display:block; padding-left:15px; font:bold 14px/40px arial, sans-serif; color:#fff; 
background:#000 url(down.png) no-repeat right center;
-webkit-backface-visibility:hidden;
-webkit-transition:0.5s;
-webkit-transform-origin: 50% 50% -20px;
backface-visibility:hidden;
transition:0.5s;
transform-origin: 50% 50% -20px;
-webkit-transform:perspective(1000px) rotateX(0deg);
transform:perspective(1000px) rotateX(0deg);
}
.cssplayMega li > p a {display:block; padding-left:15px; font:bold 14px/40px arial, sans-serif; color:#fff; text-decoration:none; background:#000;}
.cssplayMega li.hassub > p a {display:block; padding-left:15px; font:bold 14px/40px arial, sans-serif; color:#000; text-decoration:none; 
background:#fff url(down.png) no-repeat right center; position:absolute; left:0; top:0;
-webkit-backface-visibility:hidden;
-webkit-transition:0.5s;
-webkit-transform-origin: 50% 50% -20px;
-webkit-transform:perspective(1000px) rotateX(-91deg);
backface-visibility:hidden;
transition:0.5s;
transform-origin: 50% 50% -20px;
transform:perspective(1000px) rotateX(-91deg);
}
.cssplayMega li.home > p a {width:55px;}
.cssplayMega li.electrical > p a {width:120px;}
.cssplayMega li.electrical > p span {width:120px;}
.cssplayMega li.clothing > p a {width:105px;}
.cssplayMega li.clothing > p span {width:105px;}
.cssplayMega li.household > p a {width:120px;}
.cssplayMega li.household > p span {width:120px;}
.cssplayMega li.garden > p a {width:95px;}
.cssplayMega li.garden > p span {width:95px;}
.cssplayMega li > p {padding:0; margin:0; position:relative;}
.cssplayMega li > div {position:absolute; left:0; top:40px; width:740px; height:370px; background:#fff; border:1px solid #ddd; 
border-top:0; opacity:0;
-webkit-backface-visibility:hidden;
-webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
-webkit-transform-origin: 50% top;
-webkit-transform:perspective(1000px) rotateX(-91deg);
backface-visibility:hidden;
transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
transform-origin: 50% top;
transform:perspective(1000px) rotateX(-91deg);
}
.cssplayMega li > div dl {float:left; width:160px; height:300px;  padding:15px; margin:0;}
.cssplayMega li > div dl dt {padding-left:30px;}
.cssplayMega li > div dl dt.camera {background:url(camera.png) no-repeat left top;}
.cssplayMega li > div dl dt.video {background:url(video.png) no-repeat left top;}
.cssplayMega li > div dl dt.tv {background:url(printer.png) no-repeat left top;}
.cssplayMega li > div dl dt.phone {background:url(phone.png) no-repeat left top;}
.cssplayMega li > div dl dt.sewing {background:url(sewing.png) no-repeat left top;}
.cssplayMega li > div dl dt.baby {background:url(baby.png) no-repeat left top;}
.cssplayMega li > div dl dt.dress {background:url(dress.png) no-repeat left top;}
.cssplayMega li > div dl dt.tshirt {background:url(tshirt.png) no-repeat left top;}
.cssplayMega li > div dl dt.shoe {background:url(shoe.png) no-repeat left top;}
.cssplayMega li > div dl dt.bag {background:url(bag.png) no-repeat left top;}
.cssplayMega li > div dl dt.chair {background:url(chair.png) no-repeat left top;}
.cssplayMega li > div dl dt.fan {background:url(fan.png) no-repeat left top;}
.cssplayMega li > div dl dt.knife {background:url(knife.png) no-repeat left top;}
.cssplayMega li > div dl dt.clock {background:url(clock.png) no-repeat left top;}
.cssplayMega li > div dl dt.lamp {background:url(lamp.png) no-repeat left top;}
.cssplayMega li > div dl dt.flower {background:url(flower.png) no-repeat left top;}
.cssplayMega li > div dl dt.wheelbarrow {background:url(wheelbarrow.png) no-repeat left top;}
.cssplayMega li > div dl dt.ladder {background:url(ladder.png) no-repeat left top;}
.cssplayMega li > div dl dt.drill {background:url(drill.png) no-repeat left top;}
.cssplayMega li > div dl dt.barbecue {background:url(barbecue.png) no-repeat left top;}
.cssplayMega li > div dl dt a {font:bold 14px/25px arial,sans-serif; color:#000; text-decoration:none;}
.cssplayMega li > div a:hover {text-decoration:underline;}
.cssplayMega li > div dl dd {display:block; width:140px; padding:0 0 0 30px; margin:0;}
.cssplayMega li > div dl dd a {font:normal 12px/22px arial,sans-serif; color:#000; text-decoration:none;}
.cssplayMega li > div dl:first-child {width:170px; padding:0; float:right;}
.cssplayMega li > div dl:first-child dd {padding:0;}
.cssplayMega li > div dl:first-child span {display:block; width:160px; padding-left:10px; height:36px; background:#fff;}
.cssplayMega li > div dl:first-child a {font:bold 12px/36px arial,sans-serif; color:#000; text-decoration:none; cursor:pointer;}
.cssplayMega li > div dl:first-child a img {display:block; border:0;}
.cssplayMega li > div dl dd a.all {font:bold 12px/22px arial,sans-serif; color:#000; text-decoration:none; padding-right:18px; 
background:url(all.png) no-repeat right center;}
.cssplayMega li > div dl dd a.all:hover {text-decoration:underline;}
.cssplayMega li > div div {height:36px; background:#eee; width:570px; position:absolute; left:0; bottom:0;}
#info .cssplayMega li > div div p {font:bold 13px/36px arial,sans-serif; color:#000; text-decoration:none; padding:0 0 0 70px; margin:0; 
background:url(delivery.png) no-repeat 20px center;}
#info .cssplayMega li > div div p.car {background:url(car.png) no-repeat 20px center;}
#info .cssplayMega li > div div p.cashback {background:url(cashback.png) no-repeat 20px center;}

.cssplayMega ul li:hover > p a {
-webkit-transform:perspective(1000px) rotateX(0deg);
transform:perspective(1000px) rotateX(0deg);
}
.cssplayMega ul li:hover > p span {
-webkit-transform:perspective(1000px) rotateX(91deg);
transform:perspective(1000px) rotateX(91deg);
}
.cssplayMega ul li:hover > div {z-index:100;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s 0.25s;
-webkit-transform:perspective(1000px) rotateX(0deg); opacity:1;
transition: opacity 0.5s, transform 0.5s 0.25s;
transform:perspective(1000px) rotateX(0deg); opacity:1;
}
</style>
<br>
<div class ="cssplayMega">
    <ul>
	   <li class ="home"><p><a href="#url">HOME</a></p></li>
	   <li class ="hassub electrical" aria-haspopup="true"><p><span>ELECTRICAL</span><a href="#url">ELECTRICAL</a></p>
		  <div aria-haspopup="false">
			 <dl>
				<dd><a href="#url"><img src="pic2.jpg" height="334" width="170">
<span>Image caption</span></a></dd>
			 </dl>
			 <dl>
				<dt class ="camera"><a href="#url">CAMERAS</a></dt>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url" class ="all">All Cameras</a></dd>
			 </dl>
			 <dl>
				<dt class ="video"><a href="#url">VIDEOS</a></dt>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url" class ="all">All Videos</a></dd>
			 </dl>
			 <dl>
				<dt class ="tv"><a href="#url">TELEVISIONS</a></dt>
				<dd><a href="#url">Item three sub menu</a></dd>
				<dd><a href="#url">Item three sub menu</a></dd>
				<dd>&nbsp;</dd>
				<dt class ="phone"><a href="#url">MOBILE PHONES</a></dt>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd>&nbsp;</dd>
				<dt class ="sewing"><a href="#url">ELECTRICAL</a></dt>
				<dd><a href="#url">Item five sub menu</a></dd>
			 </dl>
			 <div>
				<p>Free delivery on orders over £75</p>
			 </div> 
		  </div>
	   </li>
	   <li class ="hassub clothing" aria-haspopup="true"><p><span>CLOTHING</span><a href="#url">CLOTHING</a></p>
		  <div aria-haspopup="false">
			 <dl>
				<dd><a href="#url"><img src="pic1.jpg" height="334" width="170">
<span>Image caption</span></a></dd>
			 </dl>
			 <dl>
				<dt class ="dress"><a href="#url">DRESSES</a></dt>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url" class ="all">All Clothing</a></dd>
			 </dl>
			 <dl>
				<dt class ="tshirt"><a href="#url">T SHIRTS</a></dt>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url" class ="all">All T Shirts</a></dd>
			 </dl>
			 <dl>
				<dt class ="baby"><a href="#url">BABY WEAR</a></dt>
				<dd><a href="#url">Item three sub menu</a></dd>
				<dd><a href="#url">Item three sub menu</a></dd>
				<dd>&nbsp;</dd>
				<dt class ="shoe"><a href="#url">SHOES</a></dt>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd>&nbsp;</dd>
				<dt class ="bag"><a href="#url">HAND BAGS</a></dt>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
			 </dl>
			 <div>
				<p>Next day delivery on all items</p>
			 </div> 
		  </div>
	   </li>
	   <li class ="hassub household" aria-haspopup="true"><p><span>HOUSEHOLD</span><a href="#url">HOUSEHOLD</a></p>
		  <div aria-haspopup="false">
			 <dl>
				<dd><a href="#url"><img src="pic3.jpg" height="334" width="170">
<span>Image caption</span></a></dd>
			 </dl>
			 <dl>
				<dt class ="chair"><a href="#url">CHAIRS</a></dt>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url" class ="all">All Chairs</a></dd>
			 </dl>
			 <dl>
				<dt class ="fan"><a href="#url">FANS</a></dt>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd>&nbsp;</dd>
				<dt class ="knife"><a href="#url">CUTLERY</a></dt>
				<dd><a href="#url">Item three sub menu</a></dd>
				<dd><a href="#url">Item three sub menu</a></dd>
				<dd>&nbsp;</dd>
				<dt class ="clock"><a href="#url">CLOCKS</a></dt>
				<dd><a href="#url">Item four sub menu</a></dd>
			 </dl>
			 <dl>
				<dt class ="lamp"><a href="#url">LIGHTING</a></dt>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url" class ="all">All Lighting</a></dd>
			 </dl>
			 <div>
				<p class ="car">Order online and pick up in store</p>
			 </div> 
		  </div>
	   </li>
	   <li class ="hassub garden" aria-haspopup="true"><p><span>GARDEN</span><a href="#url">GARDEN</a></p>
		  <div aria-haspopup="false">
			 <dl>
				<dd><a href="#url"><img src="pic4.jpg" height="334" width="170">
<span>Image caption</span></a></dd>
			 </dl>
			 <dl>
				<dt class ="ladder"><a href="#url">LADDERS</a></dt>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd><a href="#url">Item one sub menu</a></dd>
				<dd>&nbsp;</dd>
				<dt class ="wheelbarrow"><a href="#url">WHEELBARROWS</a></dt>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd><a href="#url">Item two sub menu</a></dd>
				<dd>&nbsp;</dd>
				<dt class ="drill"><a href="#url">DRILLS</a></dt>
				<dd><a href="#url">Item three sub menu</a></dd>
			 </dl>
			 <dl>
				<dt class ="flower"><a href="#url">FLOWERS</a></dt>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url">Item four sub menu</a></dd>
				<dd><a href="#url" class ="all">All Flowers</a></dd>
			 </dl>
			 <dl>
				<dt class ="barbecue"><a href="#url">BARBECUES</a></dt>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url">Item five sub menu</a></dd>
				<dd><a href="#url" class ="all">All Barbecues</a></dd>
			 </dl>
			 <div>
				<p class ="cashback">10% cashback on all orders over £150</p>
			 </div> 
		  </div>
	   </li>
    </ul>
</div>
<div style="height:400px;"></div>