Edit in JSFiddle

<!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]>

<nav>
<ul id="nav">
	<li><a href="#">Percoidei</a>
		<ul>
			<li><a href="#">Remoras</a>
				<ul>
					<li><a href="#">Echeneis</a>
						<ul>
							<li><a href="#">Sharksucker</a></li>
							<li><a href="#">Whitefin Sharksucker</a></li>
						</ul>
					</li>
					<li><a href="#">Phtheirichthys</a>
						<ul>
							<li><a href="#">Slender Suckerfish</a></li>
						</ul>
					</li>
					<li><a href="#">Remora</a>
						<ul>
							<li><a href="#">Whalesucker</a></li>
							<li><a href="#">Spearfish remora</a></li>
							<li><a href="#">Marlinsucker</a></li>
							<li><a href="#">Remora</a></li>
							<li><a href="#">Ceylonese remora</a></li>
						</ul>
					</li>
					<li><a href="#">Remorina</a>
						<ul>
							<li><a href="#">White suckerfish</a></li>
						</ul>
					</li>
					<li><a href="#">Rhombochirus</a>
						<ul>
							<li><a href="#">R. osteochir</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Tilefishes</a>
				<ul>
					<li><a href="#">Caulolatilus</a></li>
					<li><a href="#">Lopholatilus</a></li>
					<li><a href="#">Malacanthus</a></li>
				</ul>
			</li>
			<li><a href="#">Bluefishes</a>
				<ul>
					<li><a href="#">Pomatomus</a></li>
					<li><a href="#">Scombrops</a></li>
					<li><a href="#">Sphyraenops</a></li>
				</ul>
			</li>
			<li><a href="#">Tigerfishes</a>
				<ul>
					<li><a href="#">Amniataba</a></li>
					<li><a href="#">Bidyanus</a></li>
					<li><a href="#">Hannia</a></li>
					<li><a href="#">Hephaestus</a></li>
					<li><a href="#">Lagusia</a></li>
					<li><a href="#">Leiopotherapon</a></li>
					<li><a href="#">Mesopristes</a></li>
					<li><a href="#">Pelates</a></li>
					<li><a href="#">Pelsartia</a></li>
					<li><a href="#">Pingalla</a></li>
					<li><a href="#">Rhyncopelates</a></li>
					<li><a href="#">Scortum</a></li>
					<li><a href="#">Syncomistes</a></li>
					<li><a href="#">Terapon</a></li>
				</ul>
			</li>

		</ul>
	</li>

	<li><a href="#">Anabantoidei</a>
		<ul>
			<li><a href="#">Climbing perches</a>
				<ul>
					<li><a href="#">Anabas</a></li>
					<li><a href="#">Ctenopoma</a></li>
				</ul>
			</li>
			<li><a href="#">Labyrinthfishes</a>
				<ul>
					<li><a href="#">Belontia</a></li>
					<li><a href="#">Betta</a></li>
					<li><a href="#">Colisa</a></li>
					<li><a href="#">Macropodus</a></li>
					<li><a href="#">Malpulutta</a></li>
					<li><a href="#">Parosphromenus</a></li>
					<li><a href="#">Pseudosphromenus</a></li>
					<li><a href="#">Sphaerichthys</a></li>
					<li><a href="#">Trichogaster</a></li>
					<li><a href="#">Trichopsis</a></li>
				</ul>
			</li>
			<li><a href="#">Kissing gouramis</a></li>
			<li><a href="#">Pike-heads</a></li>
			<li><a href="#">Giant gouramis</a></li>

		</ul>
	</li>

	<li><a href="#">Gobioidei</a>
		<ul>
			<li><a href="#">Burrowing gobies</a></li>
			<li><a href="#">Dartfishes</a></li>
			<li><a href="#">Eellike gobies</a></li>
			<li><a href="#">Gobies</a></li>
			<li><a href="#">Loach gobies</a></li>
			<li><a href="#">Odontobutidae</a></li>
			<li><a href="#">Sandfishes</a></li>
			<li><a href="#">Schindleriidae</a></li>
			<li><a href="#">Sleepers</a></li>
			<li><a href="#">Xenisthmidae</a></li>
		</ul>
	</li>

</ul>
</nav>

nav{
    background:#e5e5e5;
    padding:5px 10px;
    overflow:auto;
}
#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display: block;
	width: 10em;
}

#nav li { /* all list items */
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
	position: absolute;
	background: orange;
	width: 10em;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
	margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
}