Menu Jumping on Hover

Question

Hi,
I have a web app(ASP.NET 2.0 C#). On my Masterpage, I have a menu control, and I am using a css stylesheet to style the different parts of the menu. For some reason, when I hover over the menu, it jumps a little. I think somehow the borders become larger when I hover over it.

Heres the styling for the whole menu:

.menu
{
    width:110%;
    height:25px;
    border: 1px solid gray;
    text-align:center;
}

Heres my style for the StaticHoverStyle:

.staticMenuHover
{
    background-color:#CCCCCC;
    border-style:solid;
    border-color:#888888;  
    text-decoration: underline;
    border-width:thin;
}

I don't know why this is happening, can someone help?

Thanks

Answer 1

It is happening because you are underlining your text. Try without the text-decoration, and I bet it will resolve your issue.

Answer 2

Your border width on your hover class is set to thin which is rendering as a 2 pixel border in my test. Set it to 1px.

border-width:1px;

You can also collapse that second class's border rule to a single line to make it consistent with your first class like this:

border:1px solid #888888;

Answer 3

You could always add an underline to the link (not a text-decoration) and adjust the padding. Working example:

#menu ul li a {
    display: block;
    width: 95%;
    padding: 0px 2px 2px 4px;
    text-decoration: none;
    color: rgb(30%,30%,60%); background: transparent;
}
#menu ul li a:visited {
    color: rgb(50%,10%,100%); 
}
#menu ul li a:hover {
    color: #000;
    border-bottom: 2px solid #c63; 
    background: #fcf;
    padding-bottom: 0px; }

What makes this work is changing the 2px bottom padding to 0 px and adding a 2px border-bottom in the same rule. The color change is extraneous to the question at hand.