Skip to navigation

Dropdowns 1

The basics of a dropdown menu.


<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Dropdowns 1: Basic, single level</title>
		body {
			font: 15px arial, helvetica, sans-serif;
			background: #333;
			color: #fff;
		a {
			color: #06c;
		ul { /* all lists... */
			padding: 0;
			margin: 0;
			background: #fff;
		li { /* all list items... */
			display: inline; /* set the list items left-to-right */
			position: relative; /* set the origin for child boxes to be positioned from */

		ul ul { /* lists within lists... */
			position: absolute; /* place them over the top of everything */
			left: 0; /* align them to the left of the parent list item  - necessary for some older browsers */
			top: 100%; /* align them to the bottom of the parent list item - again only necessary for older browsers */
			display: none; /* hide 'em */
		li:hover ul { /* when list items are hovered over, do this to lists contained within them... */
			display: block; /* show 'em */

			<a href="">Birds</a>
				<li><a href="">Ratites</a></li>
				<li><a href="">Fowl</a></li>
				<li><a href="">Neoaves</a></li>
			<a href="">Mammals</a>
				<li><a href="">Monotremes</a></li>
				<li><a href="">Marsupials</a></li>
				<li><a href="">Placentals</a></li>
			<a href="">Reptiles</a>
				<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>
			<a href="">Amphibians</a>
				<li><a href="">Frogs and toads</a></li>
				<li><a href="">Salamanders and newts</a></li>
				<li><a href="">Caecilians</a></li>

	<p>The basics of a CSS dropdown menu. View source for in-line comments or read the HTML Dog <a href="/techniques/dropdowns/">Dropdowns technique article</a> for more information.</p>

	<!-- Link back to HTML Dog: -->
	<p><a href=""><img src="" alt="HTML Dog"></a></p>


View original