Menu

# 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!

Last modified: 2007-07-25