Horizontal Menu

This is a multi level light weight drop down menu example based on the Suckerfish Dropdowns article by Patrick Griffiths and Dan Webb at A List Apart

Style Generator

I've added a style generator for the menu to the side bar. Just click on a color from the color grid then click the field you wish to apply it to. Once you leave the field (click elsewhere), the style will be applied to the Horizontal menu as a preview. When you are happy with the styles click Generate Styles.

Mark Up

The markup used is simply embeded un-ordered lists. It's the same for both menus apart from the unique id of the top level UL.
<ul id="nav">
    <li> <a href="#" >first Level menu</a>
        <ul>
           <li><a href="#" >second Level menu</a></li>

           <li><a href="#" >second Level menu</a>
                <ul>
                    <li><a href="#" >third Level menu</a></li>
                </ul>

             </li>
          </ul>
      </li>
</ul>

Note how the next level menu starts and ends before it's containing li ends.

JavaScript

This is all the JavaScript required, it's the same for both menus.

activateMenu = function(nav) {

/* currentStyle restricts the Javascript to IE only */
	if (document.all &&
 document.getElementById(nav).currentStyle) {  
        var navroot = document.getElementById(nav);
        
        /* Get all the list items within the menu */

        var lis=navroot.getElementsByTagName("LI");  
        for (i=0; i<lis.length; i++) {
        
           /* If the LI has another menu level */
            if(lis[i].lastChild.tagName=="UL"){
            
                /* assign the function to the LI */
             	lis[i].onmouseover=function() {	
                
                   /* display the inner menu */
                   this.lastChild.style.display="block";
                }
                lis[i].onmouseout=function() {   
                   this.lastChild.style.display="none";
                }
            }
        }
    }
}
window.onload= function(){
    /* pass the function the id of the top level UL */

    /* remove one, when only using one menu */
    activateMenu("nav"); 
    activateMenu("vertnav"); 
}

Files

I use @import for the Horizontal and Vertical CSS files, so that Netscape 4 sees only a bulleted list, other browsers that don’t support CSS should also see a normal bulleted list.

If JavaScript is disabled the menu wont work in any Version of IE but should keep working on all other browsers. The JavaScript file was modified to enable multiple menu levels and multiple menus on a page like this example.

Update

At first the horizontal menu was causing problems when menu's wrapped to the next line. I have overcome this with changes to the CSS file, which has now been uploaded. Apart from the css you should wrapp the horizontal menu in an absolutely positioned div with a high z-index so the menu is above any page content.

#holdm{
position:absolute; 
top:150px; 
left:20px; 
z-index:100; 
width:80%;
}
Thanks agian for pointing out the problem Kenrbnsn.

Browser Support

Works with: IE 5, IE 5.5, IE 6, NN 7.1, Mozilla 1.3 Opera 7.01, Opera 7.22, Phoenix 0.5, Firebird 0.7 on Windows, Camino 0.7 on Mac
Fails in: NN4, Opera 6.05 on Windows. Safari 1.0, IE5.2 on Mac

More testing on other platforms and browsers is needed, please post to the CSS Forum if your browser is not mentioned above or if you experience different results.