CSS Rollover Nav Example

Code

HTML

	<div id="nav">

		<ul id="nav-links">
			<li><a href="#">First Level Link 1</a></li>
			<li><a href="#">First Level Link 2</a>
				<ul>
					<li><a href="#">Second Level Link 1</a></li>
					<li><a href="#">Second Level Link 2</a></li>
					<li><a href="#">Second Level Link 3</a></li>
					<li><a href="#">Second Level Link 4</a></li>
				</ul>
			</li>
			<li><a href="#">First Level Link 3</a>
				<ul>
					<li><a href="#">Second Level Link 5</a></li>
					<li><a href="#">Second Level Link 6</a></li>
					<li><a href="#">Second Level Link 7</a></li>
					<li><a href="#">Second Level Link 8</a></li>
				</ul>
			</li>
		</ul>

	</div>

CSS

	@charset "utf-8";
	/* CSS Document */

	body {
		font-family: Helvetica, Arial, sans-serif;
	}

	/* nav menu */
	div#nav { 
		overflow: visible;
		background-color: #ccc;
		clear: both;
		padding: 12px;
		height: 30px;
	}

	div#nav a, div#nav a:link, div#nav a:visited, div#nav a:hover, div#nav a:active { 
		color: #fff; 
		text-decoration: none; 
	}

	div#nav ul { 
		position: absolute;
		list-style-type: none; 
		clear: both;
		margin: 0;
		padding: 0;
	}

	div#nav ul ul { 
		display: none; 
		width: 175px; 
	}

	div#nav ul li {
		position: relative; 
		list-style-type: none; 
		float: left; 
	}

	div#nav ul li a { 
		width: 175px;
		border: 1px solid #666;
		color: #fff; 
		padding: 5px;
		margin-right: 5px;
	}

	div#nav ul li a:hover { 
		color: #fff; 
		background-color: #000;
	}

	div#nav ul li:hover > ul { 
	}

	div#nav li a { 
		display: block; 
		padding: 5px;
		background-color: #999;
	}

	div#nav li a.selected { 
		background-color: #000; 
	}

	div#nav ul li a:hover {
		background-color: #333; 
	}

	div#nav ul li ul li { 
		width: 175px; 
		list-style-type: none;
		position: relative; 
		top: 0; 
		text-transform: none; 
	}

	div#nav ul li ul li a, div#nav ul li ul li a:link, div#nav ul li ul li a:visited, div#nav ul li ul li a:active {
		border: none;
		padding: 6px;
	}

	div#nav ul li ul li a:hover {
		border: none;
		padding: 6px;
	}

	div#nav ul > li { 
		float: left; 
	}

	div#nav ul > li > ul > li { 
		float: left; 
	}

	div#nav ul > li:hover > ul { 
	}

	/* force IE6 to recognize hover applied to <li> */
	div#nav li:hover ul, div#nav li.over ul { 
		display: block; 
	}

nav-basic.css: Barebones, streamlined CSS file with only the essential rollover elements.

JavaScript (for older browsers)

	startList = function() {
		if (document.all&&document.getElementById) {
			navRoot = document.getElementById("nav-links");

			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;

Compatibility

This dropdown example has been tested and works in the following browsers:

*functional, but requires additional styling