Shingo Tamura's Blog

Pure CSS hover menu

You can create hover menus like the above without any javascript code by using the pseudo-class :hover. To make it happen, you need the following 2 components:

• Menu element

  This would preferrably be an unordered list.

• Trigger element

  This element would contain the menu, and trigger the showing and hiding of it when rolled over.

Let's say that you've given a class called trigger to your trigger elements, and menu to your menus. To enable the menus to show and hide on rollovers, just add these lines to your stylesheet:

.trigger ul.menu
{
    display: none;
}
.trigger:hover ul.menu
{
    display: block;
}

To explain the code above:

• ul elements within an element with the class trigger are not displayed; and
• ul elements within an element with the class trigger are displayed as a block element on hover-over.

This is it, and the rest is pretty much just styling up the menus.

To see it in action, check out this live sample.

Please note that the hover menus only work on browsers that support the use of the pseudo-class :hover on your Trigger elements. Internet Explorer 6 unfortunately does not support it.

Hope this helps someone.

Published by Shingo Tamura on 1/6/2009 11:13 PM Posted in HTML CSS Tutorial