تالار میدوری

<style type="text/css">
.menu {height:50px; position:relative; margin-bottom:200px;}
.menu ul {padding:0; margin:0; list-style:none; width:150px; float:left;}
.menu ul ul {position:absolute; z-index:-1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul ul ul {position:absolute; left:150px; top:0;}
.menu ul ul ul.rgt {position:absolute; left:auto; right:150px; top:0;}
.menu ul li {float:left; width:150px; position:relative; z-index:10; background:url(trans.gif);
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
}
.menu ul ul li {
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menu ul ul ul li {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul li a {display:block; width:139px; height:29px; padding-left:10px; background:#ddd; font:normal 12px/29px arial, sans-serif; 
color:#000; text-decoration:none; margin-bottom:1px; margin-right:1px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menu ul li a.fly {background:#ddd url(arrow.gif) no-repeat right center;}
.menu ul li:hover > a {background-color:#999; color:#fff;}
.menu ul li:hover > a.fly {background:#999 url(arrow-over.gif) no-repeat right center;}
.menu ul ul li {margin-top:-30px;}
.menu ul ul li.p1 {margin-top:0;}
.menu ul ul ul {margin-left:-150px;}
.menu ul ul ul.rgt {margin-left:0; margin-right:-150px;}
.menu ul li:hover > ul > li {margin-top:0;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul ul li:hover > ul {margin-left:0;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.menu ul ul li:hover > ul.rgt {margin-left:auto; margin-right:0;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.menu ul li.close {margin-top:-30px; z-index:-1;}
</style>
<style media="only screen and (max-device-width:768px)" type="text/css">
/* for iPhone, iPod Touch and iPad */
.menu ul li:hover + li.close {margin-top:-60px; z-index:0;}
</style>
<br><br>
<div class ="menu">
    <ul>
	   <li><a href="#">Home</a></li>
    </ul>
    <ul>
	   <li><a class ="fly" href="#url">Contact Us</a>
		  <ul>
			 <li><a href="#">Email</a></li>
			 <li><a href="#">Telephone</a></li>
			 <li><a href="#">Online Form</a></li>
			 <li><a href="#">Snail Mail Address</a></li>
		  </ul>
	   </li>
	   <li class ="close"><a href="#url">Close X</a></li>
    </ul>
    <ul>
	   <li><a class ="fly" href="#url">Resort</a>
		  <ul>
			 <li><a href="#">Ski Hire Facilities</a></li>
			 <li><a class ="fly" href="#url">Main Ski Slopes</a>
				<ul>
				    <li class ="p1"><a href="#">Beginners Slopes</a></li>
				    <li><a href="#">Intermediate Slopes</a></li>
				    <li><a class ="fly" href="#url">Advanced Skills</a>
					   <ul>
						  <li class ="p1"><a href="#">Local</a></li>
						  <li><a href="#">Nearby</a></li>
						  <li><a href="#">With instructor</a></li>
						  <li><a href="#">Snow boarding</a></li>
					   </ul>
				    </li>
				    <li><a href="#">Expert</a></li>
				</ul>
			 </li>
			 <li><a href="#">Night Life</a></li>
			 <li><a class ="fly" href="#url">Restaurants</a>
				<ul>
				    <li class ="p1"><a href="#">Snow Hotel</a></li>
				    <li><a href="#">The Snowman</a></li>
				    <li><a href="#">Ice Cavern</a></li>
				    <li><a href="#">Ski Inn</a></li>
				</ul>
			 </li>
			 <li><a class ="fly" href="#url">Car Hire</a>
				<ul>
				    <li class ="p1"><a href="#">From Airport</a></li>
				    <li><a href="#">In Resort</a></li>
				    <li><a href="#">Multiple Resorts</a></li>
				</ul>
			 </li>
		  </ul>
	   </li>
	   <li class ="close"><a href="#url">Close X</a></li>
    </ul>
    <ul>
	   <li><a class ="fly" href="#url">Surrounding Area</a>
		  <ul>
			 <li><a href="#">Where to go</a></li>
			 <li><a href="#">What to do</a></li>
			 <li><a href="#">Places of interest</a></li>
			 <li><a href="#">Parks &amp; Museums</a></li>
		  </ul>
	   </li>
	   <li class ="close"><a href="#url">Close X</a></li>
    </ul>
    <ul>
	   <li><a class ="fly" href="#url">Information</a>
		  <ul>
			 <li><a href="#">Money Exchange</a></li>
			 <li><a class ="fly" href="#url">Resort Information</a>
				<ul class ="rgt">
				    <li class ="p1"><a href="#">Lift Passes</a></li>
				    <li><a href="#">Insurance</a></li>
				    <li><a class ="fly" href="#url">Gear Rental</a>
					   <ul class ="rgt">
						  <li class ="p1"><a href="#">Boots</a></li>
						  <li><a href="#">Skis</a></li>
						  <li><a href="#">Ski Wear</a></li>
						  <li><a href="#">Goggles</a><b></b></li>
					   </ul>
				    </li>
				    <li><a href="#">Ski Schools</a></li>
				    <li><a href="#">Snow Report</a></li>
				</ul>
			 </li>
			 <li><a class ="fly" href="#url">Language</a>
				<ul class ="rgt">
				    <li class ="p1"><a href="#">Austrian</a></li>
				    <li><a href="#">German</a></li>
				    <li><a href="#">French</a></li>
				    <li><a href="#">English</a><b></b></li>
				</ul>
			 </li>
			 <li><a href="#">Short Breaks</a></li>
		  </ul>
	   </li>
	   <li class ="close"><a href="#url">Close X</a></li>
    </ul>
</div>
<br><br>