Home

CSS Examples JK Cool CSS Menu

Date: 12/19/2004 JK Cool CSS Menu

Author: JavaScript Kit

A simple yet elegant CSS hover menu. A number of classic CSS techniques are used to realize it. The hover effect is created by setting each menu link (<a>) to "display: block", making the entire link area active and responsive to the "a:hover" pseudo class definition. A box model hack was used so #coolmenu contains two separate widths (170px by default and 164px for IE browsers), since IE adds any padding on top of the existing width definition. Lastly, for the percentage width of each menu link, IE is fed 100% while non IE browsers is fed "auto."

The CSS:

<style type="text/css">

#coolmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 170px;
background-color: #E6E6E6;
}

* html #coolmenu{ /*IE only rule, to negate the padding below IE includes in menu width.*/
width: 164px;
}

#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

</style>

The HTML:

<div id="coolmenu">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://www.codingforums.com">Coding Forums</a>
</div>

Comments (35)

What would you change for Internet Explorer 6 and 7 compatibility?

#1: Past Papers on 03/25 at 03:15 PM

nice & easy code thanks

#2: wayzee on 05/04 at 05:37 AM

This is not compatible code with Safari..
bbbbb

#3: hayek on 05/05 at 02:30 PM

thanx man wery n ice

#4: adult forum on 06/01 at 04:02 AM

Great post..However the IE7 compilance was a downer..!

#5: nasd continuing education on 07/14 at 08:38 AM

NewsUser
Privileges

Partners & ResourcesOur
Partners

CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top