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

3 Responses to “CSS-Only Hover Menu”

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