CSS-Only Hover Menu

February 1, 2008

I’ve been trying to perfect a CSS-only hover menu system for a few months now, and I’m very close, but IE6 is being a pain in the butt. I think it’s IE6-ready, but I’m not making any promises

I was going to wait until I had perfected it, but Small Potato’s DIY Hover Menu post got me off my butt – so here’s my CSS-Only Hover Menu Tutorial:

First, I want to thank Wolfgang from 1234.info for putting his CSS-only menu code in the public domain. I used that as the basis for my menus, and I then separated the design and layout sections as best I could, and added a 3rd-nth level ability for added functionality.

Instructions

Step 1:

Copy this CSS code and paste it into your .css file, or <style></style> section of your site

/*
Multilevel CSS-Only Menu
Author: Jason DeVelvis
Website: http://www.Pressography.com
This menu is based on the CSS-only drop down menu by 1234.info found here:

http://www.1234.info/webtemplates/multiflex3/

/*======================*/
/* Basic Setup */
/*======================*/
.dropnav {white-space:nowrap /*IE hack*/; float:left;} /*Color navigation bar normal mode*/
.dropnav ul {list-style-type:none; display:inline; margin: 0; padding: 0;}
.dropnav ul li {text-align: center; float:left; display: inline; background: none; margin: 0; padding: 0; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/;}
.dropnav ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block;}
.dropnav ul li ul {display:none; z-index: 2;}

/*Basic Styling*/
.dropnav {max-width:700px; border:none; margin-top:30px; background:rgb(225,225,225); color:rgb(75,75,75); font-size:130%;}
.dropnav ul li a {padding: 0 1em; height:2.1em; line-height:2.1em; text-decoration:none; font-weight:bold; color: rgb(100,100,100); border:solid 1px rgb(175,175,175);}
.dropnav ul li a:hover {}
.dropnav ul li ul li a {width: 10em; text-align: left;}

/*======================*/
/* Non-IE6 hovering */
/*======================*/
/*Main Menu Bar Hovering*/
.dropnav ul li:hover {position:relative;} /*Sylvain IE hack*/
.dropnav ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/

/*First Submenu Positioning*/
.dropnav ul li:hover ul {display:block;}
.dropnav ul li:hover ul {position:absolute; z-index:999; top:2.1em; margin-top:0.1em; left:0;}

/*Submenu styling*/
.dropnav ul li:hover ul {width: 10em;}
.dropnav ul li:hover ul li a {width: 10em; white-space:normal; display:block; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 1em; background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.dropnav ul li:hover ul li a:hover {text-decoration: underline; background-color: rgb(210,210,210);}

/*Second Level Submenu Positioning*/
.dropnav ul li:hover ul li ul {display:none;}
.dropnav ul li:hover ul li:hover ul {width: 10em; display:block; position: absolute; z-index:999; margin-top:0; left:12.1em; top: 0;}

/*Third Level Submenu Positioning*/
.dropnav ul li:hover ul li:hover ul li ul {display:none;}
.dropnav ul li:hover ul li:hover ul li:hover ul {width: 10em; display:block; position: absolute; z-index:999; margin-top:0; left:12.0em; top: 0;}

/*======================*/
/* IE6 hovering */
/*======================*/
/*Structure*/
.dropnav table {position:absolute; top:0; left:0; border-collapse:collapse;}
.dropnav ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/;}
.dropnav ul li a:hover ul {display:block; position:absolute; z-index:999; top:2.1em; left:0; margin-top:0.1em;}

/*IE6 Main Menubar Styling*/
.dropnav ul li a {padding: 0 1em;}
.dropnav ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;}
.dropnav ul li a:hover ul {}

/*Submenu Styling*/
.dropnav ul li a:hover ul li a {white-space:normal; display:block; height:1px; line-height:1.3em; padding:4px 1em; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.dropnav ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

/*First Level Submenu Positioning*/
.dropnav ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/;}
.dropnav ul li a:hover ul {display:block; position:absolute; z-index:999; top:2em; left:0; margin-top:-1px;}

/*Second Level Submenu Positioning*/
.dropnav ul li a:hover ul li a table {display: none;}
.dropnav ul li a:hover ul li a:hover table {display: block;}
.dropnav ul li a:hover ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/;}
.dropnav ul li a:hover ul li a:hover ul {position: absolute; z-index:999; margin-top:-1px; left:12em; top: 0;}

/*Third Level Submenu Positioning*/
.dropnav ul li a:hover ul li a:hover ul li a table {display: none;}
.dropnav ul li a:hover ul li a:hover ul li a:hover table {display: block;}
.dropnav ul li a:hover ul li a:hover ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/;}
.dropnav ul li a:hover ul li a:hover ul li a:hover ul {position: absolute; z-index:999; margin-top:-1px; left:12em; top: 0;}

Ok, now that you have the CSS in place, it’s time to create your menu.

Step 2: The dropnav class element. Create a div with the dropnav class where you want the menu to show up.

<div class=”dropnav”>

</div>

Step 3: The Navigation Items. Inside the dropnav div, you can add menu items like this:

<!– Menu item –>

<ul>

    <li><a href=”link/to/page.htm” mce_href=”link/to/page.htm”>Page Name</a></li>

</ul>

Step 4: Submenus. When you want to give one of your menu items a submenu, all you have to do is add another menu item inside the list item of the parent item. But since IE6 is pure evil, we have to do some IE6-specific coding, too. So, the menu item in step 3 becomes this:

      <!– Navigation item –>

      <ul>

        <li><a href=”link/to/page.htm” mce_href=”link/to/page.htm”>Page Name<!–[if IE 7]><!–></a><!–<![endif]–>

          <!–[if lte IE 6]><table><tr><td><![endif]–>

            <ul>

              <li><a href=”#” mce_href=”#”>Sublink 21</a></li>

              <li><a href=”#” mce_href=”#”>Sublink 22</a></li>

              <li><a href=”#” mce_href=”#”>Sublink 23</a></li>

              <li><a href=”#” mce_href=”#”>Sublink 24</a></li>

              <li><a href=”#” mce_href=”#”>Sublink 25</a></li>

            </ul>

          <!–[if lte IE 6]></td></tr></table></a><![endif]–>

        </li>

      </ul>

If you notice, before the </a> of the parent menu item (Page Name) we pasted in the sub-menu code, from <!–[if IE 7]> to the final <![endif]–>

And actually, we pasted that code OVER the </a>, since the submenu code already has the necessary </a> in it because of IE6/IE7 differences.

Step 5: You can also do 3rd-nth level menus the exact same way we did the 2nd level menus in step 3, with a few changes to the CSS. The CSS code in step 1 is actually set up for 3 levels, but 4th-nth levels need some changes:

To add new levels, you just need to add another chunk of CSS to your CSS code need to add the following to your CSS:

Non-IE6 Hovering CSS
For each level you want to add, just add another “ul li:hover” after the .dropnav

For example:

/*Fourth Level Submenu Positioning*/
.dropnav ul li:hover ul li:hover ul li:hover ul li ul {display:none;}
.dropnav ul li:hover ul li:hover ul li:hover ul li:hover ul {display:block; position: absolute; z-index:999; margin-top:0; left:12.0em; top: 0;}

/*Fifth Level Submenu Positioning*/
.dropnav ul li:hover ul li:hover ul li:hover ul li:hover ul li ul {display:none;}
.dropnav ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {display:block; position: absolute; z-index:999; margin-top:0; left:12.0em; top: 0;}

IE6 Hovering CSS
For each level you want to add, you need another chunk of positioning code under *IE6 Hovering* and copy/paste another “ul li a:hover” after the .dropnav

For Example:

/*Fourth Level Submenu Positioning*/
.dropnav ul li a:hover ul li a:hover ul li a:hover ul li a table {display: none;}
.dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover table {display: block;}
.dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover {position:relative ; z-index:1000;}
.dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover ul {position: absolute; z-index:999; margin-top:0; left:12em; top: 0;}

/*Fifth Level Submenu Positioning*/
.dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover ul li a table {display: none;}
.dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover ul li a:hover table {display: block;}
.dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover ul li a:hover {position:relative ; z-index:1000;}
.dropnav ul li a:hover ul li a:hover ul li a:hover ul li a:hover ul li a:hover ul {position: absolute; z-index:999; margin-top:0; left:12em; top: 0;}

Step 6: Changing the width of the submenus:

First:
Do a find/replace for 10em, and set it to whatever you want (make sure it’s in em for this to work)

Second:
Do a find/replace for 12em, and set it to whatever you set above, plus 2

Third:
Do a find/replace for 12.1 em, and set it to whatever you set above with .1 on the end

Example:
To changing the width to 8, you would replace 10em with 8em, 12em with 10em, and 12.1em with 10.1em

Step 7: Changing the height of the submenus

First:
Do a find/replace for 2em, and set it to what you want (make sure it’s in em for this to work)

Second:
Do a find/replace for 2.1em, and set it to whatever you set above with .1 on the end

Example:
If you want your menu to be 3em, you would replace 2em with 3em, and 2.1em with 3.1em

Example Source Code:

Download the source code for an example 4 tier menu system

Written by Jason · Filed Under Tutorials • CSS Hover • CSS Hover Menu • CSS Menu • CSS Only Menu • Drop Down Menu • Firefox • Hover Menu • IE6 • IE7 • Small Potato

Comments

5 Responses to “CSS-Only Hover Menu”

bing on March 5th, 2009 4:02 pm

You made my day!
For the last few days I’m looking through the net for a solution that solves the IE6’s menu hovering problem. I found many reports and descriptions of the problem, but their solutions was not easy for me to understand.

You gave the above detailed description AND an example.

The first thing that I did, is to run your example in IE6 and I enjoyed looking at the result .

Then I put your code in my page, and saw that it is working without the code problems that I had before.

Thank you! Thank you! Thank you!
Reply | Quote
Tim on November 11th, 2008 1:18 am

why would you ever use RGB colours…….
Reply | Quote
Jason on July 21st, 2008 10:46 pm

@someone – Awesome, glad it was helpful. Thanks for the extra CSS! That should be helpful for others wanting to add backgrounds on hover!
Reply | Quote
someone on July 20th, 2008 6:22 am

Hi,
this menu helped a lot.
But I added this code:

.dropnav ul li a:hover ul li a, .dropnav ul li:hover ul li a, .dropnav ul li:hover ul li:hover ul li a, .dropnav ul li:hover ul li:hover ul li:hover ul li a {
background-color:rgb(237,237,237); /*non-hover*/
color:rgb(50,50,50);
}
.dropnav ul li a:hover ul li a:hover, .dropnav ul li a:hover, .dropnav ul li:hover ul li a:hover, .dropnav ul li:hover a, .dropnav ul li:hover ul li:hover a, .dropnav ul li:hover ul li:hover ul li:hover a, .dropnav ul li:hover ul li:hover ul li:hover ul li:hover a {
background-color:rgb(210,210,210); /* hover-background */
}

After that, the level1-item also hovered as the mouse is in level2.

thanks a lot!
sorry my english, i am german
someone
Reply | Quote
fredtatum on March 18th, 2008 9:36 am

This helped tremendously when developing my site. I’ve been looking for a css based hover menu. Thanks again!
Reply | Quote