HTML

<nav>
	<ul>
		<li>
			<a href="#">Top Menu Item</a>
			<ul>
				<li>
					<a href="#">Second Level Item</a>
					<ul>
						<li><a href="#">Third Level Item</a></li>
					</ul>
				</li>
				<li><a href="#">Second Level Item</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Top Menu Item</a>
			<ul>
				<li><a href="#">Second Level Item</a></li>
				<li><a href="#">Second Level Item</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Top Menu Item</a>
			<ul>
				<li>
					<a href="#">Second Level Item</a>
					<ul>
						<li>
							<a href="#">Third Level Item</a>
							<ul>
								<li><a href="#">Fourth Level Item</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Second Level Item</a></li>
			</ul>
		</li>
	</ul>
</nav>

CSS

/* CSS RESET */
html, body, body div, span, object, iframe, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
	list-style: none;
}

/* All Links */
a:link, a:hover, a:visited, a:active {
	text-decoration: none;
	color: #000000;
}

/* Main Nav */
nav {
	padding: 0px;
	width: 150px;
	margin: 0;
	color: #fff;
	background-color: #ddd;
	height: 1000px;
	position: fixed;
	top: 0px;
	left: 0px;
	clear: left;
	overflow: hidden;
	z-index: 20;
}
/* Nav Link Style */
nav a:link {
	font-family: sans-serif;
	font-size: 1em;
	color: #fff;
	text-shadow: 1px 1px 3px #000;
}
nav a:hover, nav a:visited, nav a:active {
	color: #fff;
}
/* Main Nav Items */
/* Top Menu */
nav > ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	text-align: left;
	width: auto;
}

/* Top Menu Items and Effects */
nav ul li {
	text-align: center;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-bottom: 0px;
	background: linear-gradient(#696d79, #45474e);
	box-shadow: inset 1px 1px 1px #999, 1px 1px 1px #999;
	line-height: 3em;
}
nav ul li:hover {
	background: linear-gradient(#52dcff, #1a9fc0 3em);
	box-shadow: inset 1px 1px 1px #999, 1px 1px 1px #999;
}

/* Sub Menu Style and Effects */
nav ul li > ul {
	max-height: 0px;
	text-align: left;
	overflow: hidden;
	transition: max-height 3s ease;
}
nav ul li:hover > ul {
	max-height: 300px;
}

/* Individual Sub Menu Items and Effects */
nav ul li ul > li {
	margin: 0px;
	padding: 0px;
	background: linear-gradient(#e2eef0, #e2eef0);
	box-shadow: inset 1px 1px 1px #fff, 1px 1px 1px #ddd;
	border-bottom: 1px solid #97c3d2;
}
nav ul li ul > li:hover {
	background: linear-gradient(#e2eef0, #e2eef0);
	box-shadow: inset 1px 1px 1px #ccc, 1px 1px 1px #ccc;
}