Pure CSS hover menu

06 Jan 2009 by Shingo Tamura
Pure CSS-driven hover menu - image

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 preferably 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 don't copy the Google Analytics code though).

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

Hope this helps someone.

Update: I've made a better version in HTML5 and CSS3 with fewer images. Check it out if you're interested.

About the Author

Shingo Tamura photo

Shingo Tamura is a web developer based in New Zealand with 8+ years of experience in web development. Shingo is capable of dealing with a wide range of web or non-web technologies, and has a passion for HTML, CSS, JavaScript and Web Usability.

Follow him on Twitter at shingokko.

Rate This Posting

 
blog comments powered by Disqus

Related Blog Posts

  • Learn how to create a horizontal menu with an unordered list, float and clear.
  • Create a simple breadcrumb trail by mainly using float and clear. Also use the background property to display and position an image.
  • This tutorial will guide you through the process of creating a drop-down menu using HTML and CSS.