<style>
.menu {margin:-400px 0 450px 10px;}
.menu {position:relative; z-index:100;}
.menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; float:left;}
.menu li {background:#69c; position:relative;}
.menu ul ul {position:absolute; left:-9999px; opacity:0;
-webmaster-transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
transition:opacity 0.5s;
}
.menu > ul > li {float:left; display:block; margin-right:1px; border-radius:20px 20px 20px 0; position:relative;}
.menu > ul > li.left {border-radius:20px 20px 0 20px;}
.menu a {display:block; font:normal 14px/40px 'texgyreadventorregular', 'lucida sans', arial, sans-serif; color:#fff; text-decoration:none; 
padding:0 40px 0 10px; position:relative; z-index;5;}
.menu a:hover {text-decoration:underline;}
.menu > ul > li.left > a {padding:0 10px 0 40px;}
.menu > ul > li > a {float:left;}
.menu ul li.left ul a {text-align:right; padding:0 10px 0 40px;}
.menu ul ul li:first-child {border-radius:0 20px 0 0;}
.menu ul ul li:last-child {border-radius:0 0 20px 20px;}
.menu ul ul ul li:first-child {border-radius:20px 20px 0 0;}
.menu ul li.left ul li:first-child {border-radius:20px 0 0 0;}
.menu ul li.left ul ul li:first-child {border-radius:20px 20px 0 0;}
.menu input {position:absolute; display:none;}
.menu label {display:block; width:30px; height:30px; background:#9c2; border-radius:30px; text-align:center; 
font:normal 15px/28px 'texgyreadventorregular', 'lucida sans', arial, sans-serif; position:absolute; right:5px; top:5px; opacity:1; z-index:20; 
cursor:pointer; color:#9c2;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.menu input + label:before,
.menu input + label + label:before {display:block; content:""; width:10px; height:2px; background:#fff; position:absolute; left:10px; top:14px;}
.menu label + label:after {display:block; content:""; width:2px; height:10px; background:#fff; position:absolute; left:14px; top:10px;}
.menu input + label {opacity:0; z-index:5; background:#d50;}
.menu ul li.left label {right:auto; left:5px;}
input:checked + label {opacity:1; z-index:30;}
input:checked + label + label {opacity:0;}
#sub1a:checked ~ ul.sub1a,
#sub1b:checked ~ ul.sub1b,
#sub1c:checked ~ ul.sub1c {left:0; top:41px; opacity:1;}
#sub1d:checked ~ ul.sub1d {left:auto; right:0; top:41px; opacity:1;}
#sub1a:checked ~ label.close,
#sub1b:checked ~ label.close,
#sub1c:checked ~ label.close,
#sub1d:checked ~ label.close {display:block;}
#sub2a:checked ~ ul.sub2a,
#sub2b:checked ~ ul.sub2b,
#sub2c:checked ~ ul.sub2c {left:100%; top:auto; margin-top:-40px; margin-left:1px; opacity:1;}
#sub2d:checked ~ ul.sub2d,
#sub2e:checked ~ ul.sub2e {left:auto; right:100%; top:auto; margin-top:-40px; margin-right:1px; opacity:1;}
#sub3a:checked ~ ul.sub3a {left:100%; top:auto; margin-top:-40px; margin-left:1px; opacity:1;}
#sub3b:checked ~ ul.sub3b {left:auto; right:100%; top:auto; margin-top:-40px; margin-right:1px; opacity:1;}
</style>
<div class ="menu">
<input checked="checked" id="closelevel1" name="level1" type="radio">
<input id="closelevel2" name="level2" type="radio">
<input id="closelevel3" name="level3" type="radio">
    <ul>
	   <li><a href="#">Home</a></li>
	   <li><a href="#">Contact Us</a><input id="sub1a" name="level1" type="radio"><label for="closelevel1"></label>
<label for="sub1a">+</label>
		  <ul class ="sub1a">
			 <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><a href="#">Resort</a><input id="sub1b" name="level1" type="radio"><label for="closelevel1"></label>
<label for="sub1b">+</label>
		  <ul class ="sub1b">
			 <li><a href="#">Ski Hire Facilities</a></li>
			 <li><a href="#">Main Ski Slopes</a><input id="sub2a" name="level2" type="radio">
<label for="closelevel2"></label><label for="sub2a">+</label>
				<ul class ="sub2a">
				    <li><a href="#">Beginners Slopes</a></li>
				    <li><a href="#">Intermediate Slopes</a></li>
				    <li><a href="#">Advanced Skill Levels</a><input id="sub3a" name="level3" 
type="radio"><label for="closelevel3"></label><label for="sub3a">+</label>
					   <ul class ="sub3a">
						  <li><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 href="#">Restaurants</a><input id="sub2b" name="level2" type="radio"><label for="closelevel2">
</label><label for="sub2b">+</label>
				<ul class ="sub2b">
				    <li><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 href="#">Car Hire</a><input id="sub2c" name="level2" type="radio"><label for="closelevel2">
</label><label for="sub2c">+</label>
				<ul class ="sub2c">
				    <li><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><a href="#">Surrounding Area</a><input id="sub1c" name="level1" type="radio"><label for="closelevel1">
</label><label for="sub1c">+</label>
		  <ul class ="sub1c">
			 <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="#">National parks &amp; Museums</a><b></b></li>
		  </ul>
	   </li>
	   <li class ="left"><a href="#">Information</a><input id="sub1d" name="level1" type="radio"><label for="closelevel1">
</label><label for="sub1d">+</label>
		  <ul class ="sub1d">
			 <li><a href="#">Money Exchange</a></li>
			 <li><a href="#">Resort Essential Information</a><input id="sub2d" name="level2" type="radio">
<label for="closelevel2"></label><label for="sub2d">+</label>
				<ul class ="sub2d">
				    <li><a href="#">Lift Passes</a></li>
				    <li><a href="#">Insurance</a></li>
				    <li><a href="#">Gear Rental</a><input id="sub3b" name="level3" type="radio">
<label for="closelevel3"></label><label for="sub3b">+</label>
					   <ul class ="sub3b">
						  <li><a href="#">Boots</a></li>
						  <li><a href="#">Skis</a></li>
						  <li><a href="#">Ski Wear</a></li>
						  <li><a href="#">Goggles</a></li>
					   </ul>
				    </li>
				    <li><a href="#">Ski Schools</a></li>
				    <li><a href="#">Snow Report</a></li>
				</ul>
			 </li>
			 <li><a href="#">Language</a><input id="sub2e" name="level2" type="radio"><label for="closelevel2">
</label><label for="sub2e">+</label>
				<ul class ="sub2e">
				    <li><a href="#">Austrian</a></li>
				    <li><a href="#">German</a></li>
				    <li><a href="#">French</a></li>
				    <li><a href="#">English</a></li>
				</ul>
			 </li>
			 <li><a href="#">Short Breaks</a></li>
		  </ul>
	   </li>
	   <li><a href="#">Privacy</a></li>
    </ul>
</div>