Hover effect

[danhodge 0]

Okay, so currently i have my navigation bar here:

http://potatoes.netii.net/

 

I like the basic style of it, but it has some noticable issues. The main problem im having right now is that i don't understand how i can make the background expand out from the text, as oppose to the current effect, in which the text moves with it.

 

Thanks if anyone can help, and if you don't understand what i mean i will provide a graphic to show you with

- Danny

[Andrea 20]

I am not clear on what you mean by "background expand out from text'.

[Andrea 20]

But if you change your CSS to this:

#navbar li a:link {
text-decoration: none;
height: 50px;
color: white;
text-align: center;
}


#navbar li a:hover {
background: #98AFC7;
padding: 15px 0 13px 0;
}

You get what I think you might be talking about.

[danhodge 0]

Basically, if you edit that padding to make it padding: 15px 10px 13px 10px; then it will expand out, however then it pushes everything else to the other side of where it expands...

 

Is there is a way to fix this, or a way around it?

[falkencreative 49]

I think the key thing here is that the margins/padding/height on the link need to stay consistent between the regular and hover states, and only the background should change. That should fix the issue you are having where the text jumps when hovered over.