CSS Examples 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)