Pure CSS hover menu: ShingoTamura '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.

Rate This Posting

Comments

sivas resimleri

very good

04/19/2009 05:48
Juliana Garcia Sales

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

05/03/2009 21:09
Shanshui Liu

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

09/06/2009 01:54
RichieRyanRReyes

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.

11/08/2009 07:41
Tom

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?

01/24/2010 06:21
Shingo Tamura
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.
02/04/2010 01:47
mangesh

is this working with IE 6

03/13/2010 10:40
Shingo Tamura

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

03/29/2010 04:18
Warren

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.

05/19/2010 12:08
Shingo Tamura
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;
}
```
05/23/2010 00:56
sunny

beautiful style...

06/01/2010 23:36
Mark

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

06/29/2010 06:18
test

Ok GOODStyle hihi

07/05/2010 05:47
Matt

I think you will be able to use Js in order to make this work in older browsers

07/11/2011 18:53
christian nielsen

Trying to convert products into a horizontal list and the popup menu remains vertical. It wont work (tried a lot). Any Ideas?

07/11/2011 19:00
mjnestor

Mark who commented on 06/29/2010 06:18 all tha you need to do is set the z-index to 1 or 2 or whatever is in front of the other div tag. This will ensure it pops up on top.

07/11/2011 19:02
Sam

Hi great tut but is there a way to move the hover box to the side or something? as it covers all my links when you hover over one of the links. Many thanks

07/11/2011 19:06
Greg

What if you want to expand left? Is that like many more times harder. I have a menu I want to display on the right edge of my screen and unfortuntately the menu would expand off of the screen

07/27/2011 12:17
Kimberlee

Thank you so much! I was able to fiddle around with your code to complete a mouse-over navigation bar and it looks (and works!) wonderfully.

@Sam:
In my CSS, I have:
".trigger ul.menu{
    margin: 20px 0px 0px 30px;
    width: 240px;
    height: auto;
}"
If you change the margins, width, and height, you can make the box fit any position and size.

07/27/2011 12:19

Your comment will be manually and carefully reviewed by the system administrator. Off-topic comments will be deleted without warning.

Shingo Tamura's Blog