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
Similar Posts:
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
style.css
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
We would only use the above script for IE6 (using conditional comments inside the <head> tag).
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
Similar Posts: