hkp
05-22-2009, 07:23 AM
hello friends, I have design a dropdown menu only using css. But My problem is that It is working fine in the firefox but not in the internet explorer.
Here is the code of that drop down menu.
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
float: left;
width: 100px;
}
li ul {
position: absolute;
top: 30px;
display: none;
}
ul li a {
display: block;
text-decoration: none;
line-height: 20px;
color: #000;
padding: 5px;
background: #CC0;
margin: 0 2px;
}
ul li a:hover { background: #66F; }
li:hover ul, li.over ul { display: block; }
</style>
<body>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Web</a>
<ul>
<li><a href="">Browser</a></li>
<li><a href="">Search</a></li>
</ul>
</li>
<li><a href="">Monkey</a>
<ul>
<li><a href="">Eating Banana</a></li>
<li><a href="">Throwing Poop</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Via Web</a></li>
<li><a href="">Via Phone</a></li>
<li><a href="">Via tin can and string</a></li>
</ul>
</li>
</ul>
</body>
</html>
Here is the code of that drop down menu.
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
float: left;
width: 100px;
}
li ul {
position: absolute;
top: 30px;
display: none;
}
ul li a {
display: block;
text-decoration: none;
line-height: 20px;
color: #000;
padding: 5px;
background: #CC0;
margin: 0 2px;
}
ul li a:hover { background: #66F; }
li:hover ul, li.over ul { display: block; }
</style>
<body>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="">Web</a>
<ul>
<li><a href="">Browser</a></li>
<li><a href="">Search</a></li>
</ul>
</li>
<li><a href="">Monkey</a>
<ul>
<li><a href="">Eating Banana</a></li>
<li><a href="">Throwing Poop</a></li>
</ul>
</li>
<li><a href="">Contact</a>
<ul>
<li><a href="">Via Web</a></li>
<li><a href="">Via Phone</a></li>
<li><a href="">Via tin can and string</a></li>
</ul>
</li>
</ul>
</body>
</html>