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:
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>
Step 3: The Navigation Items. Inside the dropnav div, you can add menu items like this:
<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:
<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:
.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:
.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
Also on Pressography: Booking Plugins, And When To Stop Using One
Comments
Got something to say?
You must be logged in to post a comment.