hover problem

[Historical Forums User]

im working on the navigation.. everything seems to be working fine.. but if you take the cursor towards the links.. it starts to flicker between the normal and hover state…

http://uncutbeatz.com/abz/

#menu {

float: right;

list-style: none;

margin: 60px 0 0 0;

padding: 0;

}



#menu li {

float: left;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

margin: 0;

padding: 12px 12px 12px 12px;

}



#menu a {

color: #ffffff;

display: block;

margin: 0;

text-decoration: none;

-moz-transition:margin-top;

-moz-transition-timing-function: ease-in;

-moz-transition-duration: 250ms;

}



#menu a:hover {

margin-top: -5px;

color: #c3ddfa;

}

anyone have any idea why?

[TheDoc]

Because you’re shifting the link up but not expanding its height would be my guess.

[joshuanhibbert]

Use padding instead of margin. It will have to be padding-bottom as you cannot have negative padding.

[wolfcry911]

I would also move the padding from the li to the anchor

[Historical Forums User]

http://jsfiddle.net/qaey6/

iv tried everything mentioned above and its still not working smoothly

[joshuanhibbert]

http://jsfiddle.net/sl1dr/qaey6/2/

[djpic]

Seems to be working for me, what browser are you using? I used both safari and firefox, both appeared fine.

[joshuanhibbert]

@djpic the issue was the link jittering when hovering if the mouse was towards the bottom. It is fixed in my fiddle with the use of padding.

[Historical Forums User]

@joshuanhibbert Thnx alot :)

[Author]

Posts