The versions of the dual menu bar that display the second bar based on which element you hovered over last really annoy me because I often accidentally move the mouse over another entry in the top bar while moving to the entry I want in the second bar so this version of the dual menu bar script requires that you click on an entry in the top bar to change an entry in the second bar. That way you can move the mouse across other entries in the top bar to get to the second level entry you require.
Creating this script didn't work out quite the way I wanted because I was hoping to keep the second level menus within the corresponding top level menu just like the suckerfish menu system does. Unfortunately there wasn't any way I could find to do that and to create a dual bar menu that would display correctly in IE6 since to do that needs the menu bars to be defined as position:fixed which IE6 doesn't support. I have therefore done the next best thing with all of the menus being nested inside a div that isolates the stylesheet for the menu from the rest of the page and all the second level menus inside a second div so that the number of container divs corresponds to the level of the menu bar. Those entries in the top menu have ids of menu1, menu2 etc. while the corresponding second level menus have ids of n1, n2 etc. so that the number on the end of the ids matches the second level menu back to the corresponding top level entry.
The first step in adding a double bar menu to your web page is to write the HTML for the menus. As a navigation menu is basically a list of links, that's how we will code it in our HTML.
With an operational navigation menu in our page, the next step in making it into a double bar menu is to apply some styles to the menu in order to make the entries actually appear as a bar across the page.
To do this the first step is to copy the following stylesheet code and save it as bmenu.css.
Next you need to modify this code so the menu looks the way you want. Those things that you can safely change are the border, background-color, color, and the width of the li. You should leave the rest of the code alone or the menu will not display properly as a bar across the page.
To apply this stylesheet to the menu we link it into the head of our web page.
<link rel="stylesheet" href="bmenu.css" type="text/css" />
This article written by Stephen Chapman, Felgall Pty Ltd.