Navigation toplink <li> shifts on hover in Firefox 26.0 Only - need a solution

Question

This has been bugging me for a while. I've searched all of stackoverflow for a solution to this problem. I've downloaded and installed firebug and inspected the codes on the div, li and ul level turning off and on positioning, margins etc.

I need to find a solution that shifts the menu font. It's not in bold weight as was indicated in some of the questions and tags, so that's not the problem. I've double checked with safari, chrome and IE and only firefox is giving me this problem.

here's the link to the existing site and maybe someone can help me fix this.

www.reggaeking.com

if you hover from the "mens" to "womens" buttons you will see the shift. (browse on firefox to see it happening)

cheers & thanks for looking at this.

Answer 1

You are changing the subnav position absolute on hover. To fix it you should just set position absolute from the start:

#topNav .subnav {
    height: 0;
    overflow: hidden;
    position: absolute;
}