It's along the line of Toby's page: you markup your menu's as lists and if
you require a second level, the dropdown part, you nest a new list for
that. Then, with CSS, you play a bit of hide and seek with those nested
lists. Hide it when the page displays plainly, but when a relevant menu
item gets hovered or gets the focus, display the nested list:
markup:
<ul id="menu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a>
<ul>
<li><a href="#">item 3.1</a></li>
<li><a href="#">item 3.2</a></li>
</ul>
</li>
</ul>
css:
ul#menu ul li ul {
display:none; }
ul#menu ul li:hover ul {
display:block; /*or any other display you need*/}
You can add all the styles you want to both the list items and the anchor
elements, for hover, positioning, size and all. Will work in almost all
modern graphical browsers.
But remember: IE6 is not a _modern_ browser; hence it doesn't work in IE
:-( For one, IE doesn't like hovering on anything else than the anchor
element and secondly, it cannot play hide and seek with content.
I've got some examples on line (text is in Dutch, but the markup and the
styles are pretty streight forward):
<
http://home.wanadoo.nl/b.de.zoete/voorbeelden/voorbeeld_menu-met-hovereffect.html>