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)
Do you have a fix for this menu in FireFox?
If you test this code in FireFox, you'll see what I mean. The links span the browser window.
What version of Firefox are you using? I used FF 1.0 when testing out the code...
Playing with coolmenu, I found I can only provide one alternative background colour (I want five) that works in IE6. I added:
#coolmenu.common{
background-color: green;
}
#coolmenu.dive{
background-color: blue;
}
and I find "common" works but "dive" doesn't. If I change the order of the declarations, "dive" works but "common" doesn't. Does anyone know how to customise the background colour?
Alan.
What do you mean by alternative background color? In other words, how/ where are you defining the classes above?
> how/ where are you defining the classes above?
>
Here's a page that demonstrates the issue, at least on my system. I would have expected to see a green menu on top of a blue one. In IE6 I can have either a green one or a blue one, but not both. You can see what I mean by commenting out one of my extensions or the other:
...............................................
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Coolmeny Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#coolmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 170px;
/* background-color: #E6E6E6; Chopping this out doesn't help :( */
}
* 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;
}
/* This bit added by Alan */
/*
First format, blue followed by green.
In IE6 the menu whose class is blue_background
draws in blue, but the one that should be green
has the background colour of the "base class",
i.e. of coolmenu.
*/
#coolmenu.blue_background{
background-color: blue;
}
#coolmenu.green_background{
background-color: green;
}
/*
Second format, green followed by blue.
In IE6 the menu whose class is blue_background
draws in blue, but the one that should be green
has the background colour of the "base class",
i.e. of coolmenu.
#coolmenu.green_background{
background-color: green;
}
#coolmenu.blue_background{
background-color: blue;
}
*/
<style>
</head>
<body>
<div id="coolmenu" class="green_background">
CSS Drive
<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>
Coding Forums
</div>
<div id="coolmenu" class="blue_background">
CSS Drive
<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>
Coding Forums
</div>
</body>
</html>
...............................................
Hi, i´ve got a question.
I want this Buttons not in a vertical order but in a horizontal order.
How does it work?
Gerrit, from Germany;-)
Gerit,
> I want this Buttons not in a vertical order but in a horizontal order.
>
Changing the rule for ‘#coolmenu a’ so that ‘display’ is ‘inline’ rather than ‘block’ will allow a horizontal presentation.
The coolmenu was designed as a vertical array. You will have to change it so that there is sufficient width to display the menu options horizontally. These secondary changes might destroy its ability to work in IE5. Since IE5 now accounts for less than 5% of usage (http://www.w3schools.com/browsers/browsers_stats.asp), and its popularity is still falling, you may think this doesn’t matter. It’s still something to consider.
Alan.
here is the HTML code;
<table>
<tr >
<td >item1</td>
<td >item2</td>
<td >item3</td>
<td >item4</td>
</tr>
</table>
and you have to specify your menu class which is mostly arrow
i mean like,
A.arrow
{
color: #anycolor ;
background-color: #anycolor ;
display: block;
}
A:active.arrow
{
color: #anycolor ;
background-color: #anycolor ;
display: block;
}
A:visited.arrow
{
color: #anycolor ;
background-color: #anycolor ;
display: block;
}
A:hover.arrow
{
color: #anycolor ;
background-color: #anycolor ;
display: block;
}
Important" display: block; this property allows your menu correct displayed on firefox or any other browser.
greetz
To "Alan"...
I have the same exact problem as you describe (using your "coolmenu" example).
Have you been made aware of any mechanisms by which this can be resolved? it can be fixed by a variety of cumbersome, code-intensive IE-specific lines, but that's not really the preferred solution...
How typical that it's IE that causes the issue... I only recently "caught on" to FireFox, and was amazed (and mortified) that my blog looked absolutely ABYSMAL in FireFox, largely due to the fact that I had designed it "on the fly" using IE to check.
Well, it's also hampered by my complete lack of design skills, but that's nor "browser specific"...
Cheers,
GT.
Geoffrey,
No, I’m still no wiser as to making IE use the specified colours. When I posted, I thought I was writing a site for a firm with five different areas of business, and I wanted each to have its own colour scheme. It now turns out that a crucial email never arrived, and I should have been planning a site for just one of those areas. I therefore don’t need to control the menu colours, so I’ve rather stopped struggling.
There is a very good tutorial site here: http://css.maxdesign.com.au/index.htm. I’ve had no trouble with any of their examples in any browser except for Opera in full screen mode, which won’t seem to render anything correctly. For reasons you will appreciate, I’ve used IE as little as possible in my explorations, so I don’t actually know if it draws their demos properly.
The menus I’m using have background images rather than a special background colour. It’s just occurred to me that I could have achieved the effect I wanted with background images: a plain green rectangle for one menu and a plain blue one for another. They would only need to be tiny files, and the browsers could tile them. If IE absolutely refuses to give menus the correct background colour, plain images might save the day.
> How typical that it's IE that causes the issue...
>
I wasn’t pleased to read that IE7 will deal with standards compliance issues by ignoring them. There is a suggestion that basic compliance will be used as an incentive to shell out for MS’ next operating syste (http://news.com.com/2100-1032-5088642.html). Maybe, a few years down the line, things will improve.
I reported a rendering bug in Firefox and I had a reply within an hour. Can you imagine the same from MS?
Alan.
