Vertical CSS3 menu.txt

<style>
#menuu {position:relative; margin-left:0; z-index:10;}

#menuu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#000; padding:0;
background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
border:1px solid #888;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.4);
box-shadow:0 0 5px rgba(0,0,0,0.4);
}

#menuu li {display:inline;}
#menuu ul ul {position:absolute; left:100%; margin-top:-31px; margin-left:-8px; display:none;}
/* for IE7 */
#menu ul ul {*left:-9999px; *display:block;}

#menuu ul#toplevel {position:relative; float:left;}

#menuu a {display:block; font: 13px/30px Oswald, verdana,arial,sans-serif; color:#fff; text-decoration:none; padding:0 15px;} 


#menuu li:hover > a {color:#222; text-shadow:1px 1px 2px rgba(255, 255, 255, 0.6);
background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-ms-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
background-image:linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,255,0.1));
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
}
#menuu ul li:first-child > a {
-moz-border-radius:9px 9px 0 0;
-webkit-border-radius:9px 9px 0 0;
border-radius:9px 9px 0 0;
}
#menuu ul li:last-child > a {
-moz-border-radius:0 0 9px 9px;
-webkit-border-radius:0 0 9px 9px;
border-radius:0 0 9px 9px;
}

#menuu.red li:hover > a {background-color:#d00;}
#menuu.orange li:hover > a {background-color:#fa0;}
#menuu.yellow li:hover > a {background-color:#da2;}
#menuu.green li:hover > a {background-color:#494;}
#menuu.blue li:hover > a {background-color:#0bf;}
#menuu.indigo li:hover > a {background-color:#95d;}
#menuu.violet li:hover > a {background-color:#e8e;}
#menuu.grey li:hover > a {background-color:#999;}

#menuu ul li:hover > ul {display:block; left:100%;}

#menuu img {position:fixed; width:0; height:0; left:0; top:0; z-index:-1;}
#menuu ul:hover + img {width:100%; height:100%;}

</style>

<div id="menuu" class="orange">
	<ul id="toplevel">
		<li><a href="index.html">Home</a></li>
		<li><a href="index.html">Contact Us &#9002;</a>
			<ul>
				<li><a href="index2.html">Email</a></li>
				<li><a href="index3.html">Telephone</a></li>
				<li><a href="index.html">Online Form</a></li>
				<li><a href="index.html">Snail Mail Address</a></li>
			</ul>
		</li>
		<li><a href="index.html">Resort &#9002;</a>
			<ul>
				<li><a href="index.html">Ski Hire Facilities</a></li>
				<li><a href="index.html">Main Ski Slopes &#9002;</a>
					<ul>
						<li><a href="index.html">Beginners Slopes</a></li>
						<li><a href="index.html">Intermediate Slopes</a></li>
						<li><a href="index.html">Advanced Skill Levels &#9002;</a>
							<ul>
								<li><a href="index.html">Local</a></li>
								<li><a href="index.html">Nearby</a></li>
								<li><a href="index.html">With instructor</a></li>
								<li><a href="index.html">Snow boarding</a></li>
							</ul>
						</li>
						<li><a href="index.html">Expert</a></li>
					</ul>
				</li>
				<li><a href="index.html">Night Life</a></li>
				<li><a href="index.html">Restaurants &#9002;</a>
					<ul>
						<li><a href="index.html">Snow Hotel</a></li>
						<li><a href="index.html">The Snowman</a></li>
						<li><a href="index.html">Ice Cavern</a></li>
						<li><a href="index.html">Ski Inn</a></li>
					</ul>
				</li>
				<li><a href="index.html">Car Hire &#9002;</a>
					<ul>
						<li><a href="index.html">From Airport</a></li>
						<li><a href="index.html">In Resort</a></li>
						<li><a href="index.html">Multiple Resorts</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="index.html">Information &#9002;</a>
			<ul>
				<li><a href="index.html">Money Exchange</a></li>
				<li><a href="index.html">Resort Essential Information &#9002;</a>
					<ul>
						<li><a href="index.html">Lift Passes</a></li>
						<li><a href="index.html">Insurance</a></li>
						<li><a href="index.html">Gear Rental &#9002;</a>
							<ul>
								<li><a href="index.html">Boots</a></li>
								<li><a href="index.html">Skis</a></li>
								<li><a href="index.html">Ski Wear</a></li>
								<li><a href="index.html">Goggles</a></li>
							</ul>
						</li>
						<li><a href="index.html">Ski Schools</a></li>
						<li><a href="index.html">Snow Report</a></li>
					</ul>
				</li>
				<li><a href="index.html">Language &#9002;</a>
					<ul>
						<li><a href="index.html">Austrian</a></li>
						<li><a href="index.html">German</a></li>
						<li><a href="index.html">French</a></li>
						<li><a href="index.html">English</a></li>
					</ul>
				</li>
				<li><a href="index.html">Short Breaks</a></li>
			</ul>
		</li>
		<li><a href="index.html">Surrounding Area &#9002;</a>
			<ul>
				<li><a href="index.html">Where to go</a></li>
				<li><a href="index.html">What to do</a></li>
				<li><a href="index.html">Places of interest</a></li>
				<li><a href="index.html">National parks &amp; Museums</a></li>
			</ul>
		</li>
		<li><a href="index.html">Privacy</a></li>
	</ul></div>