How can I create a menu in HTML without using Javascript?

Question

Since many years a GUI-standard are the menu-bars of applications with menus popping up, if you click or hover an entry in the menu-bar. Some websites implement this feature too, but they are using Javascript, as far as I can see. For different reasons Javascript can be a problem, so the question: Is this possible to implement without Javascript, only using HTML and CSS?

Answer 1

I've done something like this before, and it's a trick pulled off by placing the menu items in anchor tags, with submenus in hidden divs INSIDE those anchor tags. The CSS trick is to make the inner div appear during the a:hover event.

It looks something like:

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

Your mileage may vary...

EDIT: Internet Explorer 6 and lower do NOT support the :hover pseudo-class on other elements besides A. In more 'modern' browsers, it is accepted to be able to use this trick with LI, TD, DIV, SPAN, and most any tag.

Answer 2

Have a look at CSS Menu Maker.

Answer 3

Best known technique is the suckerfish menus. Searching for that will result in a lot of interesting menu's. It only needs javascript in IE6 and lower.

Here's a list of the sons of the suckerfish menus.

Answer 4

Consider using the CSS methods as a backup for when JavaScript is unavailable. JavaScript can* provide a better user experience for drop-down menus because you can add some delay factors to stop menus immediately disappearing if the mouse briefly leaves their hover area. Pure-CSS menus can sometimes be a bit finicky to use, especially if the hover targets are small.

*: of course, not all menu scripts actually bother to do this...

Answer 5

You can use the pseudoclass :hover to get an hover effect.

a:link {
 color: blue;
}

a:hover {
  color: red;
}

I can give a more extensive example but not right now (need to get the kids to the dentist).

Answer 6

There's also Eric Meyer's original article on pure CSS menus.

There are bound to be much more robust and modern takes out there now mentioned by others, but I thought I'd mention it for posterity. :)