A little bit of help with a CSS menu

HTML & CSS
1

Hello,

I have built a really simple menu for my site

Now when you hover over the links a red stapline appears above it, which is what I want, only thing is though it drops the text down.

How can I get the red line to appear when you hover over the links, but the text stay in the same position with the line above the text? Anyone kindly help? Thanks


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Test Menu</title>
 <style>
 #nav {
 font-family: arial;
 font-weight:bold;
 width:940px;
 height:36px;
 font-size: 120%;
 color:#666666;
 list-style-type:none;
 background:#fff;
 padding: 0 20px;
}
#nav li {
 float:left;
 width:auto;
 height:16px;
 padding:10px 15px;
}
#nav li a {
 display:block;
 color:#666666;
 text-decoration:none;
}
#nav li a:hover {
 text-decoration:none;
 color:#CC0000;
 border-top:7px solid #cc0000;
}
 
 </style>
 </head>
<body>
<ul id="nav">
 <li><a href="">Option 1</a></li>
 <li><a href="">Option 2</a></li>
 <li><a href="">Option 3</a></li>
 <li><a href="">Option 4</a></li>
 <li><a href="">Option 5</a></li>
</ul>
</body>
</html>
2

Cheers, tried that but not working:


#nav li a:hover {
 text-decoration:none;
 color:#CC0000;
 border-top:7px solid #cc0000;
 padding-top:-3px;
}
3

add padding-top:-3px; to #nav li a:hover

4

didn’t accounted for that.

i hear good news (?) on SP blogs: Google Frame is out. maybe the days to worry about ie6 are over? i surely hope so :slight_smile:

5

Until companies upgrade I’d say we still have IE6 to worry a bout, many major sites are dropping IE6 support, but until companies get the hint to upgrade, we are SOL :slight_smile:

6

Yes, your method was best :slight_smile:

I just offered an alternative as IE6 doesn’t do transparent borders and would render the border in the current foreground color which ruins the effect. (You could set it to white but that would not work on a coloured background etc.)

7

ok, ok :slight_smile:

but i believe my second one is more adequate. the border doesn’t do any circus tricks appearing and disappearing, the <a> element doesn’t push up and down <li>'s insides like an alien baby trying to get borned :lol:

all in all, less calculations upon hover on the box models for the elements in question. a good thing, i say :slight_smile:

8

Or a third way :slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Menu</title>
<style>
#nav {
    font-family: arial;
    font-weight:bold;
    width:940px;
    height:36px;
    font-size: 120&#37;;
    color:#666666;
    list-style-type:none;
    background:#fff;
    padding: 0 20px;
}
#nav li {
    float:left;
    width:auto;
    height:16px;
[B]    padding:3px 15px 10px;[/B]
}
#nav li a {
    display:block;
    color:#666666;
    text-decoration:none;
[B]    padding-top:7px[/B]
}
#nav li a:hover {
    text-decoration:none;
    color:#CC0000;
[B]    padding-top:0;[/B]
    border-top:7px solid #cc0000;
}
</style>
</head>
<body>
<ul id="nav">
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 2</a></li>
    <li><a href="">Option 3</a></li>
    <li><a href="">Option 4</a></li>
    <li><a href="">Option 5</a></li>
</ul>
</body>
</html>
9

#nav li a:hover {
text-decoration:none;
color:#CC0000;
border-top:7px solid #cc0000;
margin-top: -7px;
}

or better yet

#nav li a {
display:block;
color:#666666;
text-decoration:none;
border-top:7px solid transparent;
}
#nav li a:hover {
text-decoration:none;
color:#CC0000;
border-color:#cc0000;
}

10

sorry my bad margin-top:-7px;. Didn’t test it at first