PDA

View Full Version : Horizontal Dropdown Menu with Pure CSS



goldenboy
12-21-2007, 06:17 PM
Hi,

I'm new here. I was experimenting with horizontal dropdown menu using only CSS. The following is my code so far:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head><title>test</title>

<style type="text/css">
#menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 800px;
height: 30px;
background-color: #FF9C3C;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#menu ul li {
float: left;
width: 108px;
height: 30px;
line-height: 30px;
}

#menu ul li a {
font-size: 12px;
text-decoration: none;
display: block;
text-align: center;
}

#menu ul ul,
#menu ul li:hover ul ul {
display: none;
}

#menu ul li:hover ul,
#menu ul ul li:hover ul {
display: block;
}

#menu li {
position: relative;
}

#menu ul ul {
position: absolute;
top: 100%;
left: 0%;
background-color: #DDDDDD;
border-width: 1px;
border-style: solid;
}

#menu ul ul ul {
position: absolute;
top: 5%;
left: 95%;
background-color: #FFFFFF;
border-width: 1px;
border-style: solid;
}

</style>


</head>

<body>

<div id="menu">
<ul>
<li><a href="test">test</a>
<ul>
<li><a href="test">gteata</a></li>
<li><a href="test">gtegerata</a>
<ul>
<li><a href="test">gteata</a></li>
<li><a href="test">gteata</a></li>
</ul>
</li>
</ul>
</li>




<li><a href="test">me</a>
<ul>
<li><a href="test">gteata</a></li>
<li><a href="test">gtegerata</a>
<ul>
<li><a href="test">gteata</a></li>
<li><a href="test">gteata</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

</body>
</html>


The code above works for Opera, Firefox and Safari. However, when I tested it in IE 7, a weird thing happens. You can play around with the menu, and occasionally, when you hover any one of the main options, 2 levels of menu appear at the same time instead of 1.

Does this require any sort of hack to fix? Or am I missing something?

Thanks a lot for any help in advance.