CSS Examples JK Cool CSS Menu

Date: 12/19/2004 JK Cool CSS Menu

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."

CSS Drive JavaScript Kit Free JavaScripts JavaScript Reference Coding Forums

The CSS:

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)

I've been playing with this menu a bit. When I introduced a line-height,
things got weird on Moz (1.0.2) and NN(7.01);

here's the code:

<html>
<head>
<style type="text/css">

a {
font-family: verdana, helvetica, sans-serif;
font-size: 11pt;
background-color: #000;
color: #fff;
display: block;
padding: 4px;
line-height: 11pt;
}

.Tabs div {
border-bottom: 1px solid #fff;

}

<style>

</head>
<body>

<div class="Tabs">
<div>abc</div>
<div>def</div>
<div>strange</div>
<div>odd</div>
<div>peculiar</div>
<div>weird</div>
<div>deviant</div>
<div>say what?</div>
<div>no comprendo</div>
</div>

</body>
</html>

The bottom borders at some places dissapear in Moz/NN. Changes in lineheight, create changes in which borders show and which don't.

The effect disappears when line-height is in px and not pt. However, effect then returns when text-size is changed in the browser. The effect completely disappears when line-height = normal.

#1: Rob dv on 04/17 at 01:55 PM

Alan, I would like to point out to you that the problem may be the fact that it is an id. As you hopefully know, with an id, the first tag using that id will get the properties, after that, nothing else gets those properties, so there may also may be a correlation between that and the position of the id coding in CSS, I will test it out to make sure, however this seems it could very well be the problem.

#2: Peter on 04/27 at 09:20 PM

Zut Aleurs, that's fixed it. Obvious with hindsight; thanks Peter.

#3: Alan on 04/29 at 03:16 PM

Try firefox css/html validator for any browser problem.You can download it from firefox exchange i guess.It works great and also interesting for someone who likes to write clean codes like me.That's why i prefer text editor for the coding.

#4: Ejder Yurdakul on 05/12 at 08:02 PM

Yes, I love it, although I got a Virus on my Desktop and uninstalled it but haven't put it back on, it's awesome, it's based off the program called Tidy HTML, you should try it out, it does wonders, and really surprises you with some major web sites.

#5: Peter on 05/12 at 08:30 PM

here is another menu rollover image without javascript
#nav a:link
{
background: url(a.jpg) no-repeat;
}
#nav a:visited
{
background: url(a.jpg) no-repeat;
}
#nav a:visited
{
background: url(b.jpg) no-repeat;
}
#nav span
{
display: none;
}

html code=

<div id="nav">
< a href="#"><span>Home</span></a>
< a href="#"><span>News</span></a>
< a href="#"><span>About</span></a>
< a href="#"><span>Contact</span></a>
</div>