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)
Looks nice, but you should use <ul> list for menu! It's valid xhtml, and css, but WAI... oh...
Anyone knows how to make the music in your webpage keeps on looping?
I have the same question as Gerrit (from Germany). I too want this block of buttons in a horizontal order rather than a block, but your "inline" solution didn't seem to fix it. Any suggestions?
Here is the code with your revision...
<style type="text/css">
#coolmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 200px;
background-color: #E6E6E6;
}
* html #coolmenu{ /*IE only rule, to negate the padding below IE includes in menu width.*/
width: 200px;
}
#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: 'inline';
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>
<div id="coolmenu">
CSS Drive
JavaScript Kit
Free JavaScripts
JavaScript Reference
Coding Forums
</div>
Does anyone yet have a fix for cool menus to make the drop downs/sub menus work in IE7?
A very smart CSS menu, without graphic and java.
This menue is very accessible. I like it.
This menu looks great! But does anyone know how to fix the placement (i.e "top" and "left" pixel assignments for the layer) so that the menu stays in place on my nav bar if windows are resized or if someone changes their screen resolution? For some reason, my menus end up in different parts of the screen. Any help is appreciated.
This is a great CSS menu. Thanks for sharing.
Thanks! Very good menu. I like it!!!!!!!
I guess this is the simpliest CSS menu that I found and I'm quite exciting about it ...thanks for the tips
