I have a css drop down menu, when I test it in IE, Firefox and Chrome, it displays like this. The drop down menu is suppose to display underneath the Contact button, and the Links button disappears when I place my mouse over the Contact button. The Links button should be next to the Contact button. It needs to be cross browser, hopefully I can get to work for most versions. My css and html are below. Can someone please help me correct this? Thanks in advance.
Here is my css:
#mainMenu {
list-style: none;
background: #000;
width: 100%;
margin: 0;
padding: 0;
}
#mainMenu li {
display: inline;
}
#mainMenu li a, #mainMenu li a:visited {
color: #FFF;
text-decoration: none;
display: inline-block;
background: #000;
padding: 3px 7px 3px 7px;
}
#mainMenu li a:hover {
display: inline-block;
background: #666;
padding: 3px 7px 3px 7px;
}
#mainMenu li ul {
display: none;
position: relative;
width:100px;
background: #000;
top:32px;
}
#mainMenu li:hover ul {
display: block;
width: 100px;
}
#mainMenu li:hover li {
width:100px;
}
#mainMenu li:hover li a {
width: 100px;
display:block;
position:relative; /* make IE let you click whole thing */
}
#mainMenu li li a:hover {
background:#666;
}
You need to set the drop down to be absolute otherwise it will interrupt the flow. Float the top lists and set them to position:relative and then the dropdown will drop underneath ate left:0.
Don’t use display:none to hide but instead hide off screen with a large negative margin which is better for accessibility.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
#mainMenu {
list-style: none;
background: #000;
width: 100%;
margin: 0;
padding: 0;
float:left;
clear:both;
}
#mainMenu li {
float:left;
position:relative;
}
#mainMenu li a, #mainMenu li a:visited {
color: #FFF;
text-decoration: none;
display: inline-block;
background: #000;
padding: 3px 7px 3px 7px;
}
#mainMenu li a:hover {
background: #666;
}
#mainMenu li ul {
position: absolute;
width:100px;
background: #000;
top:25px;
margin:0 0 0 -999em;
padding:0;
list-style:none;
}
#mainMenu li:hover ul {
margin:0;
width: 100px;
left:0;
}
#mainMenu li li {
width:100px;
float:none;
}
#mainMenu li:hover li a {
display:block;
position:relative; /* make IE let you click whole thing */
}
#mainMenu li li a:hover {
background:#666;
}
</style>
<body>
<ul id="mainMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Official Programme</a></li>
<li><a href="#">Pennants</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">News, Results & Notices</a></li>
<li><a href="#">Carnival Flyers</a></li>
<li><a href="#">Representative Events</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">Clubs</a></li>
<li><a href="#">Committees</a></li>
</ul>
</li>
<li><a href="#">Links</a></li>
</ul>
</body>
</html>
Won’t work in IE6 unless you use the JS helper (google suckerfish menus).
