CSS classes for styling the menu

menu

used on the <div> element encapsulationg the menu.

root

used on the <a> tag immidiately following the opening <div id="menu" class="menu"> tag

folder

used on <li> tags that represent folders, i.e. has child nodes

document

used on <li> tags that represent documents, i.e. has no child nodes

last

last <li> in a <ul>

open, closed

used to indicate status of <li> tag representing a folder

current

is set on the <a> element of the current page (that should have no href attribute at all when creating the menu dynamically on the server-side). Don't set this in the HTML, only use it in your CSS.

Menu levels

The CSS of the menu is written to accomodate an unlimited number of menu levels. Unfortunately this requires the CSS level 2 child selector ">", which is not implemented in Internet Explorer version 6 and earlier. This is worked around in the ie-menu.css stylesheet.

However, the Internet Explorer workaround does only allow for a limited number of menu levels. You can increase the number of levels by adding more lines in all code similar to this:

.menu li.folder span,
.menu li.open li.folder span,
.menu li.open li.folder li.folder span,
.menu li.open li.folder li.folder li.folder span
{/* style rules */}

Remeber to change all such selector-"rows" to keep them in balance with each other. Maybe you also should think twice to find out if your menu really needs more than four levels!