Dropdowns 3

Multi-level dropdown with more detailed design.
HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Dropdowns 3: Prettying it up</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
	
		body {
			font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
			background: #333;
			margin: 15px;
		}
	
		article {
			width: 600px;
			margin: 0 auto;
			background: #000;
			color: #fff;
			border-radius: 5px;
			box-shadow: 0 0 15px 2px #666;
		}
	
		section {
			clear: left;
		}
	
		h1 {
			font-size: 45px;
			font-weight: 100;
			letter-spacing: 15px;
			text-align: center;
		}

		h1, #main_content, #dog_link {
			padding: 15px;
		}

		p {
			margin: 15px 0;
		}
	
		a {
			color: #06c;
		}
	
		#main_nav ul {
			background: white;
			float: left;
			-webkit-transition: .5s;
			transition: .5s;
		}
	
		#main_nav li {
			float: left;
			position: relative;
			width: 150px;
			list-style: none;
			-webkit-transition: .5s;
			transition: .5s;
		}
	
		#main_nav > ul > li > a, h1 {
			text-transform: uppercase;
		}
	
		#main_nav a {
			display: block;
			text-decoration: none;
			padding: 5px 15px;
			color: #000;
		}

		#main_nav ul ul {
			position: absolute;
			left: 0;
			top: 100%;
			visibility: hidden;
			opacity: 0;
		}
	
		#main_nav ul ul ul {
			left: 100%;
			top: 0;
		}
	
		#main_nav li:hover, #main_nav li:hover li {
			background: #ddd;
		}
	
		#main_nav li li:hover, #main_nav li li:hover li {
			background: #bbb;
		}
	
		#main_nav li li li:hover {
			background: #999;
		}
	
		#main_nav li:hover > ul {
			visibility: visible;
			opacity: 1;
		}
	</style>
	<!--[if lt IE 9]><script src="/r10/html5shiv.js"></script><![endif]-->
</head>
<body>
	<article>
		<h1>Tetrapods</h1>

		<nav id="main_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>
	
		<section id="main_content">
			<p>A CSS dropdown menu example using tetrapod groups as navigation items. The "Mammals" item provides an example of a multi-level dropdown. See the HTML Dog <a href="/techniques/dropdowns/">Dropdowns tecnhique article</a> for more information.</p>

			<p>Tetrapods are a major group of animals containing those that evolved from fish and developed four limbs. They comprise the major sub-groups of amphibians, reptiles, mammals, and birds. "Tetrapod" literally means four-footed.</p>
		</section>

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

View original