Pure CSS menus

Navigation menus can be written using only HTML and CSS. If you have a good web browser, these menus will open when hovering the mouse over them. Internet Explorer is made to only show a simple list, but the links are still there.

The navigation menus on this site are more complicated, they add a small javascript which is only parsed by Internet Explorer 6 to replicate the functionality provided by the CSS (which Internet Explorer doesn’t support).

You can view the sample page and also the menu CSS (and IE CSS).

In brief, this is the basic HTML used in the menu:

<ul id="nav">

  <li><a href="#1">One</a></li>

  <li>
    <a href="#2">Two</a>
    <ul>
      <li><a href="#2.1">Two One</a></li>
      <li>
        <a href="#2.2">Two Two</a>
        <ul>
          <li><a href="#2.2.1">Two Two One</a></li>
          <li><a href="#2.2.2">Two Two Two</a></li>
          <li><a href="#2.2.3">Two Two Three</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li><a href="#3">Three</a></li>

</ul>

This is the display-related CSS used:

#nav > ul, #nav * > ul { visibility: hidden; }
#nav li:hover > ul { visibility: visible; }

The odd selector is so the rule doesn’t apply to IE.