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)

Looks nice, but you should use <ul> list for menu! It's valid xhtml, and css, but WAI... oh...

#1: snapshot on 05/29 at 02:34 PM

Anyone knows how to make the music in your webpage keeps on looping?

#2: ron on 08/04 at 01:32 AM

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>

#3: Gerald on 09/25 at 04:39 PM

Does anyone yet have a fix for cool menus to make the drop downs/sub menus work in IE7?

#4: DoubleSpeed on 10/23 at 11:09 AM

Sorry no,if somebody fix it,please share..

ad.comc4i.com

#5: hayek on 09/15 at 12:38 PM

A very smart CSS menu, without graphic and java.
This menue is very accessible. I like it.

#6: Webdesign on 11/05 at 03:59 AM

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.

#7: Freelancer on 11/14 at 07:31 AM

This is a great CSS menu. Thanks for sharing.

#8: trademark registration on 11/26 at 09:14 PM

Thanks! Very good menu. I like it!!!!!!!

#9: Peter on 12/04 at 01:44 AM

I guess this is the simpliest CSS menu that I found and I'm quite exciting about it ...thanks for the tips

#10: software uitbesteden on 12/10 at 01:12 PM

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