HTML Dog
Skip to navigation

Dropdowns 2

A simple multi-level dropdown menu.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Dropdowns 2: Multiple levels</title>
	<style>
		body {
			font: 15px arial, helvetica, sans-serif;
			background: #333;
			color: #fff;
		}
	
		a {
			color: #06c;
		}
	
		ul {
			padding: 0;
			margin: 0;
			background: #fff;
			float: left;
		}
	
		li {
			float: left;
			display: inline;
			position: relative;
			width: 150px;
			list-style: none;
		}
	
		ul ul {
			position: absolute;
			left: 0;
			top: 100%;
			background: #ccc;
			display: none;
		}
	
		ul ul ul {
			left: 100%;
			top: 0;
			background: #999;
		}
	
		li:hover > ul {
			display: block;
		}
	
	
		p {
			clear: left;
			padding-top: 1em;
		}
	</style>
</head>

<body>
	<nav>
		<ul>
			<li>
				<a href="">Birds</a>
				<ul>
					<li><a href="">Ratites</a></li>
					<li><a href="">Fowl</a></li>
					<li><a href="">Neoaves</a></li>
				</ul>
			</li>
			<li>
				<a href="">Mammals</a>
				<ul>
					<li>
						<a href="">Monotremes</a>
						<ul>
							<li><a href="">Echidnas</a></li>
							<li><a href="">Platypus</a></li>
						</ul>
					</li>
					<li>
						<a href="">Marsupials</a>
						<ul>
							<li><a href="">Opossums</a></li>
							<li><a href="">Numbats, etc.</a></li>
							<li><a href="">Bandicoots, etc.</a></li>
							<li><a href="">Kangaroos, koalas, wombats, etc.</a></li>
						</ul>
					</li>
					<li>
						<a href="">Placentals</a>
						<ul>
							<li><a href="">Primates, ungulates, etc.</a></li>
							<li><a href="">Anteaters, sloths, etc.</a></li>
							<li><a href="">Elephants, etc.</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="">Reptiles</a>
				<ul>
					<li><a href="">Lizards and snakes</a></li>
					<li><a href="">Tortoises and turtles</a></li>
					<li><a href="">Crocodilians</a></li>
					<li><a href="">Tuatara</a></li>
				</ul>
			</li>
			<li>
				<a href="">Amphibians</a>
				<ul>
					<li><a href="">Frogs and toads</a></li>
					<li><a href="">Salamanders and newts</a></li>
					<li><a href="">Caecilians</a></li>
				</ul>
			</li>
		</ul>
	</nav>

	<p>A simple multi-level CSS dropdown menu. Read the HTML Dog <a href="/techniques/dropdowns/">Dropdowns technique article</a> for more information.</p>

	<!-- Link back to HTML Dog: -->
	<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original