• Sign In

Shingo Tamura's Blog

Offering useful tips and tricks on web development technologies

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 01/06/2009 23:13 Posted in HTML CSS

Comments

• very good

  Comment from sivas resimleri on 04/19/2009 05:48

• Thank you, your technique saved me a lot of time!

  Comment from Juliana Garcia Sales on 05/03/2009 21:09

• Useful technique brought across in a simple, straightforward manner. ?????!

  Comment from Shanshui Liu on 09/06/2009 01:54

• neat and simple approach. this is good than relying on Javascript since other browsers which doesn't use the same javascript in computers (like iPhone, PSP, etc). with this, hovering will still show the desired effects. javascript should handle DOM manipulation and some AJAX request.

  Comment from RichieRyanRReyes on 11/08/2009 07:41

• I'm trying to convert this into a horizontal list. I am having trouble with the positioning of the popup menu... Anyone able to help?

  Comment from Tom on 01/24/2010 06:21

• Hi Tom,

  If you are just wanting to turn the popup menus into horizontal ones, you can add float: left; to this rule:

  .trigger ul.menu li
  {
      padding: .1em .5em;
      float: left;
  }
  

  This way you can position the popup menus just like the vertical ones.

  Hope this answers your question.

  Comment from Shingo Tamura on 02/04/2010 01:47

• is this working with IE 6

  Comment from mangesh on 03/13/2010 10:40

• As I mentioned at the bottom of the article, "Internet Explorer 6 unfortunately does not support it".

  Comment from Shingo Tamura on 03/29/2010 04:18

• I'm trying to use this technique in a grid view, with a menu of options for each row of the grid. I have an image that serves as the top level UL which brings up the options. All works great except if the grid has to scroll. The drop down menus stay where they are originally rendered and don't move with the grid rows. Any thoughts? I've tried several things so far to no avail. Thanks.

  Comment from Warren on 05/19/2010 12:08

• If you are positioning the Menu element absolutely, you could try setting position to relative when the options are hidden. Here's the code:

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

  Comment from Shingo Tamura on 05/23/2010 00:56

• beautiful style...

  Comment from sunny on 06/01/2010 23:36

• Ii'm trying to enter a long list but the hover state is tucking itself under one of the other divs i have on the page. any ideas on how to get it on the top? Thanks

  Comment from Mark on 06/29/2010 06:18

• Ok GOODStyle hihi

  Comment from test on 07/05/2010 05:47

Leave a Comment