Simple Dropdown Menu

In an ideal world, creating a cross-browser dropdown menu would be straight forward. Unfortunately, the world of browsers is far from ideal (as long as Internet Explorer 6 still exists!). For other browsers, the following code works fine:

dropdown.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<ul id="navigation">
	<li><a href="#nogo" title="blah">Number 1</a></li>
	<li class="dropdown"><a href="#nogo" title="blah">Number 2</a>
		<ul>
		<li class="top"><a href="#nogo" title="blah">Number 2a</a></li>
		<li><a href="#nogo" title="blah">Number 2b</a></li>
		<li><a href="#nogo" title="blah">Number 2c</a></li>
		<li><a href="#nogo" title="blah">Number 2d</a></li>
		</ul>
	</li>
	<li><a href="#nogo" title="blah">Number 3</a></li>
	<li class="dropdown"><a href="#nogo" title="blah">Number 4</a>
		<ul>
		<li class="top"><a href="#nogo" title="blah">Number 4a</a></li>
		<li><a href="#nogo" title="blah">Number 4b</a></li>
		<li><a href="#nogo" title="blah">Number 4c</a></li>
		</ul>
	</li>
	<li><a href="#nogo" title="blah">Number 5</a></li>
</ul><!--end of navigation-->
</body>
</html>

style.css

body {
	font-size:62.5%;
}
ul {
	list-style:none;
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
ul#navigation {
	width:700px;
	font-size:1.2em;
	margin:0 auto;
	text-align:center;
	height:2.6em;
	border:1px solid #000;
	}
ul#navigation li {
	height:2.6em;
	line-height:2.6em;
	float:left;
	width:140px;
	position:relative;
	background:#ccc;
}
ul#navigation li ul {
	position:absolute;
	width:140px;
	display:none;
	top:2.6em;
	left:0;
	border:1px solid #000;
	border-top:none;
}
ul#navigation li ul li{
	background:#ccc;
	border-top:1px solid #000;
	position:relative;
}
ul#navigation li ul li.top {
	border:none;
}
ul#navigation li ul li a {
	display:block;
}
ul#navigation li:hover ul {
	display:block;
}

You’ve no doubt seen something similar before. We use a combination of absolute positioning, the display property and the hover pseudo-class on the list-items. IE6 doesn’t support using the hover pseudo-class on any element other than <a> tags.

There are various workarounds to make IE6 behave properly. Most of these workarounds concentrate on using css hacks and/or inserting IE6 specific markup into the html with conditional comments. In my opinion, Javascript makes for a much simpler solution.

ie6.js

window.onload = function () {
	var nav = document.getElementById('navigation');
	var links = nav.getElementsByTagName('li');
	for (var i = 0; i < links.length; i++) {
		links[i].onmouseover = function() {
			var nest1 = this.getElementsByTagName('ul')[0];
			if(nest1) nest1.style.display = 'block';	
 
		}	
		links[i].onmouseout = function() {
			var nest1 = this.getElementsByTagName('ul')[0];
			if(nest1) nest1.style.display = 'none';		
		}
	}
}

We would only use the above script for IE6 (using conditional comments inside the <head> tag).

<!--[if IE 6]>
<script src="ie6.js" type="text/javascript"></script>
<![endif]-->
</head> <!-- end of head -->

In the event that javascript and/or css is turned off, the user will still be able to access the top level links (so make sure they actually point to a page).

You can see the example here

Category: CSS, Javascript // Make ElanMan happy and be the first to comment.Open my Lovebox

RSS

ElanMan