Who needs JavaScript to do drop-down menus on a HTML web-page? Anyway, I gave it a try.
This does not work in IE6, since I’m using the child selector and the :hover pseudo class. Personally, I think that we should stop supporting IE6, so that we can all focus on other things.
I’m using a CSS IE hack below since IE doesn’t do inline-block on block elements.
With the following HTML:
<ul class="navbar"> <li>Meat</li> <li>Vegetables</li> <li>Fruit and lots of fruit <ul> <li>Organge</li> <li>Apple <ul> <li>Fuji</li> <li>Gala</li> <li>Granny Smith <ul> <li>Red</li> <li>Green</li> </ul> </li> </ul> </li> <li>Pomgranade</li> </ul> </li> </ul>
just add this CSS:
.navbar, .navbar ul { list-style-type: none; margin: 0; padding: 0; } .navbar li { position: relative; padding: 0.5em; white-space: nowrap; } .navbar > li { display: inline-block; zoom: 1; *display: inline; } .navbar ul { display: none; position: absolute; left: 0; top: 100%; } .navbar li:hover > ul { display: block; } .navbar ul ul { left: 100%; top: 0; }
If you put it all together, this is what it looks like, with a tiny theme added: