HTML
This can’t get any simpler. Just make a valid nested unordered list with a root id of “navmenu-h” (for horizontal) or “navmenu-v” (for vertical) and you are all set. The CSS and JavaScript rely on the names “navmenu-h” or “navmenu-v”. Here’s an example of a valid nested unordered list:

    <ul id="navmenu-h">
    <li><a href="#">Root nav item</a>
    <ul>
    <li><a href="#">Sub nav item</a></li>
    </ul>
    </li>
    </ul>

You can make this as simple or as complicated as you like. The CSS will take care of the prettiness.

CSS
This is the most complicated part of the entire technique. Way too complicated to list out in detail. Just open the above link, click on the View CSS link, and have a gander. I tried to add as many detailed comments as I could so that making edits would be as easy as possible.

What’s with the JavaScript?

Sadly, Internet Explorer 6 and below does not recognize the psuedo class :hover on any element except the <a> tag. To get around IE’s crappulence we have to add a bit of JavaScript for the poor souls that are still blind to the future.

The script looks at the html of the page and, on a mouseover event, assigns a iehover class to <li> tags that have a nested <ul> tag. If you viewed the example CSS it probably makes much more sense now.

This is how I call my script:

    <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <!--[if gte IE 5.5]>
    <script language="JavaScript" type="text/JavaScript">
    $(document).ready(function(){
    $("#navmenu-h li,#navmenu-v li").hover(
    function() { $(this).addClass("iehover"); },
   function() { $(this).removeClass("iehover"); }
    );});
    </script>
   <![endif]-->

Two things you’ll notice: 1. There’s a link to jQuery from Google’s AJAX API site. Since I’m using jQuery to dynamically add the iehover class, we need to include the actual jQuery library. In my opinion, the easiest way to do this is to just use Google’s hosted service. 2. I’m using Microsoft IE conditional comments. By writing out the code like this it prevents browsers other than IE 5.5 or higher from loading the script and also gives us an extra hook to fix things like IE’s z-index bugs.

The bad news

That’s right… this technique does not work in every browser and I’ve only had the opportunity to test it in a select few.

• Firefox 1.x+ : any OS (works!!!)
• IE 5.5+ : Windows (works!!!)
• IE Mac : any version, OS 9-X (probably doesn’t work)
• Safari 2.0+ : OS X (works!!!)
• Safari 1.x : OS X (probably doesn’t work)
• Opera 7+ : any OS (works!!!)
• Opera 1.x-6.x : any OS (probably doesn’t work)

Make Flash obey

Thanks go out to Brian on how to get around the flash “rendering on top of everything” issue… just add the following <param> if you are using this menu system near a flash object and IE is giving you problems:

<param name="wmode" value="transparent" />