<style type="text/css">
#pulldown {width:100%; height:250px; position:fixed; left:0; top:-250px; z-index:800;
transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
}
#opaque {position:absolute; width:100%; height:250px; left:0; background:url(diagonal.png); opacity:0.9; filter: alpha(opacity=90);
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
#contents {height:250px; width:100%; position:absolute; left:0; color:#fff; text-align:center; background:url(red.png) repeat-x left top; 
overflow:hidden;}
a#pull {display:block; position:absolute; z-index:10; bottom:-30px; color:#fff; left:50%;background:#811; z-index:-1; width:200px; 
margin-left:-100px; height:30px; text-align:center; opacity:0.8;
text-decoration:none; font-family:arial, sans-serif; font-size:14px; line-height:30px;
-moz-border-radius: 0 0 25px 25px; 
-webkit-border-radius: 0 0 25px 25px;
border-radius: 0 0 25px 25px;
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
a#push {display:none; position:absolute; z-index:10; bottom:-30px; color:#fff; left:50%;background:#141; z-index:-1; width:200px; 
margin-left:-100px;  height:30px; text-align:center; opacity:0.8;
text-decoration:none; font-family:arial, sans-serif; font-size:14px; line-height:30px;
-moz-border-radius: 0 0 25px 25px; 
-webkit-border-radius: 0 0 25px 25px;
border-radius: 0 0 25px 25px;
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}
#pulldown:target {top:0;}
#pulldown:target #pull {display:none;}
#pulldown:target #push {display:block;}
/* for IE 8 an lower :target emulation */
#pulldown.target {top:0;}
#pulldown.target #pull {display:none;}
#pulldown.target #push {display:block;}
.menuHolder {width:1025px; margin:0 auto; height:250px; color:#fff; text-align:center; position:relative; z-index:20; 
background:url(ski.png) no-repeat 100px 60px;}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0 0 0 2px; margin:0; list-style:none; display:inline-block; background:url(divider.gif) no-repeat left center;}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px 0 2px; background:url(divider.gif) no-repeat right center; position:relative;}
.menuHolder ul.nav li a.top-a {display:block; padding:0 20px; text-decoration:none; font:14px/36px arial, sans-serif; color:#fff; margin-top:4px;
transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-webkit-transition: 0.25s ease-in-out;
}
.menuHolder ul.nav li a.top-a:hover {background:#500; color:#ddd;
-moz-border-radius: 8px 8px 0 0; 
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.menuHolder ul.nav li:hover a.top-a {background:#500; color:#ddd;
-moz-border-radius: 8px 8px 0 0; 
-webkit-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.menuHolder ul.nav div {position:absolute; top:-250px; left:2px; opacity:0; border:8px solid #500; background:#500; 
-moz-border-radius: 0 0 12px 12px; 
-webkit-border-radius: 0 0 12px 12px;
border-radius: 0 0 12px 12px;
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
transition: opacity 0.8s ease-in-out;
-o-transition: opacity 0.8s ease-in-out;
-moz-transition: opacity 0.8s ease-in-out;
-webkit-transition: opacity 0.8s ease-in-out;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:0; margin:0; list-style:none; width:140px; margin:5px; float:left; display:inline; text-align:left; 
background:#fff;
-moz-border-radius: 4px; 
-webkit-border-radius: 4px;
border-radius: 4px;
}
.menuHolder ul.nav div ul li {float:left; background: transparent url(dot.gif) repeat-x left bottom; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li.last {background:transparent;}
.menuHolder ul.nav div ul li a {display:block; width:110px; text-decoration:none; font:13px/16px arial, sans-serif; color:#009; margin:0; 
padding:4px 0 4px 10px; background:transparent url(arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#141; background:transparent url(arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:150px;}
.menuHolder ul.nav div.col2 {width:300px;}
.menuHolder ul.nav div.col3 {width:450px;}
.menuHolder ul.nav li:hover div {top:40px; opacity:1;}
</style>
<br><br><br><br>
<div id="pulldown">
    <div id="opaque"></div>
    <div id="contents">
	   <div class ="menuHolder">

    <ul class ="nav">
	   <li><a class ="top-a" href="#url">Home</a></li>
	   <li><a class ="top-a" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
	   <!--[if lte IE 6]><table><tr><td><![endif]-->
	   <div class ="col3">
		  <ul class ="col">
			 <li><a href="#url">Ski Slopes</a></li>
			 <li><a href="#url">Night Life</a></li>
			 <li><a href="#url">Restaurants</a></li>
			 <li><a href="#url">Car Hire</a></li>
			 <li class ="last"><a href="#url">Ski Hire Facilities</a></li>
		  </ul>
		  <ul class ="col">
			 <li><a href="#url">Snow Hotel</a></li>

			 <li><a href="#url">The Snowman</a></li>
			 <li><a href="#url">Ice Cavern</a></li>
			 <li class ="last"><a href="#url">Ski Inn</a></li>
		  </ul>
		  <ul class ="col">
			 <li><a href="#url">Advanced Skills</a></li>
			 <li><a href="#url">Beginners Slopes</a></li>

			 <li><a href="#url">Intermediate Slopes</a></li>
			 <li class ="last"><a href="#url">Expert</a></li>
		  </ul>
	   </div>
	   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	   </li>
	   <li><a class ="top-a" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->

	   <!--[if lte IE 6]><table><tr><td><![endif]-->
	   <div class ="col2">
		  <ul class ="col">
			 <li><a href="#url">Lift Passes</a></li>
			 <li><a href="#url">Insurance</a></li>
			 <li><a href="#url">Ski Schools</a></li>
			 <li><a href="#url">Snow Report</a></li>

			 <li class ="last"><a href="#url">Gear Rental</a></li>
		  </ul>
		  <ul class ="col">
			 <li><a href="#url">Boots</a></li>
			 <li><a href="#url">Skis</a></li>
			 <li><a href="#url">Ski Wear</a></li>
			 <li class ="last"><a href="#url">Goggles</a></li>

		  </ul>
	   </div>
	   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	   </li>
	   <li><a class ="top-a" href="#url">Contact<!--[if gte IE 7]><!--></a><!--<![endif]-->
	   <!--[if lte IE 6]><table><tr><td><![endif]-->
	   <div class ="col1">
		  <ul class ="col">

			 <li><a href="#url">Email</a></li>
			 <li><a href="#url">Telephone</a></li>
			 <li><a href="#url">Online Form</a></li>
			 <li class ="last"><a href="#url">Snail Mail Address</a></li>
		  </ul>
	   </div>
	   <!--[if lte IE 6]></td></tr></table></a><![endif]-->

	   </li>
	   <li><a class ="top-a" href="#url">Privacy</a></li>
	   <li><a class ="top-a" href="#url">Nearby<!--[if gte IE 7]><!--></a><!--<![endif]-->
	   <!--[if lte IE 6]><table><tr><td><![endif]-->
	   <div class ="col2 left">
		  <ul class ="col">
			 <li><a href="#url">Where to go</a></li>

			 <li><a href="#url">What to do</a></li>
			 <li><a href="#url">Places of interest</a></li>
			 <li class ="last"><a href="#url">National parks &amp; Museums</a></li>
		  </ul>
		  <ul class ="col">
			 <li><a href="#url">Snow Hotel</a></li>

			 <li><a href="#url">The Snowman</a></li>
			 <li><a href="#url">Ice Cavern</a></li>
			 <li class ="last"><a href="#url">Ski Inn</a></li>
		  </ul>
	   </div>
	   <!--[if lte IE 6]></td></tr></table></a><![endif]-->
	   </li>
    </ul>
	   </div>
    </div>
	   <a href="#pulldown" id="pull">Pull Down Menu</a>
	   <a href="#url" id="push">Close Menu</a>
</div>