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>