HTML Forum

**harish** · 05-22-2009, 02:52 AM

I have created a drop down menu only using css. It is working fine in the firefox but not on the internet explorer. Here is the code of that.

Code:

<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>

Plz help me so that It also work on the internet exporer

**LadynRed** · 05-22-2009, 09:59 AM

Your problem is right here: li:hover ul - IE does NOT support the hover pseudo-class on anything but the <a> tag. So, do a search for "whatever hover" and grab the bit of javascript needed to make IE6 work.

**harish** · 05-28-2009, 02:39 AM

Thanks for this information. Can it is not possible to make dropdown menu without javascript. I want to create dropdown menu only using css and not javascript

**LadynRed** · 05-28-2009, 09:46 AM

Quote:

Can it is not possible to make dropdown menu without javascript

Yes, it's possible, and that is NOT what I was telling you. What I said was that IE does NOT SUPPORT the hover pseudo-class on anything except the <a> tag ! In order to force IE to hover on anything else, like the <li> tag as you have in your code, you need that small bit of javascript to make it work. Whatever:hover is NOT a javascript dropdown menu, all it does is force IE into making the hover work on any tag, not just the <a>.

**harish** · 05-29-2009, 02:37 AM

Thanks for the replay can you give me example of the drop down menu which is working in all browsers..

**LadynRed** · 05-29-2009, 09:26 AM

Take your pick: http://www.cssplay.co.uk/menus/

**harish** · 05-30-2009, 02:11 AM

Thanks for sharing this useful site. This link is very useful for me. I can learn lot of methods of dropdown menu through this link.
once again thanks a lot.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!