Simple jQuery dropdown menu

by El Khal

HTML

<div class="wrapper">
		<div id="main">
			<nav>
				<ul>
					<li>
						<a href="#">Link 1</a>
						<ul class="fallback">
            <li><a href="#">Sub-Link 1</a><button onclick="alert(55);">?</button></li>
							<li><a href="#">Sub-Link 2</a></li>
							<li><a href="#">Sub-Link 3</a></li>
							<li><a href="#">Sub-Link 4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Link 2</a>
						<ul class="fallback">
							<li><a href="#">Sub-Link 1</a></li>
							<li><a href="#">Sub-Link 2</a></li>
							<li><a href="#">Sub-Link 3</a></li>
							<li><a href="#">Sub-Link 4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">Link 3</a>
						<ul class="fallback">
							<li><a href="#">Sub-Link 1</a></li>
							<li><a href="#">Sub-Link 2</a></li>
							<li><a href="#">Sub-Link 3</a></li>
							<li><a href="#">Sub-Link 4</a><></li>
						</ul>
					</li>
					<li>
						<a href="#">Link 4</a>
						<ul class="fallback">
							<li><a href="#">Sub-Link 1</a></li>
							<li><a href="#">Sub-Link 2</a></li>
							<li><a href="#">Sub-Link 3</a></li>
							<li><a href="#">Sub-Link 4</a></li>
						</ul>
					</li>
				</ul>
			</nav>
		</div>
	</div>

CSS

nav {background:#fff; width: 450px; margin: 0 auto;}
nav > ul {text-align:center; height: 50px;}
nav ul li {float:left;display:inline;}
nav ul li a {display:block;padding:15px 25px;color:#444;}
nav ul li a:hover {background:#5DA2A6; color: #fff;}
nav ul li ul {position:absolute;width:160px;background:#FFF;}
nav ul li ul li {margin:0;padding:0;width:160px;}
nav ul li ul li a {display:block;padding:15px 10px;color:#444; text-align: left}
nav ul li ul li:hover a {background:#F7F7F7;}
nav ul li ul.fallback {display:none;}
nav ul li:hover ul.fallback {display:block;}


* {margin:0;padding:0;}
a img {border:none;}
a {text-decoration:none;}
body {font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; color:#444; background:#fff; padding: 1em;}
.wrapper {max-width:1000px;width:95%;margin:0 auto;position:relative;}

JavaScript

$('nav li ul').hide().removeClass('fallback');
		$('nav li').hover(function () {
			$('ul', this).stop().fadeToggle(300);
		});