firefox的内联块元素mouseenter / mouseleave问题

Question

我有一个非常简单的导航元素。

在Chrome和Safari中看起来很不错，但是当我在Firefox中查看它时，我注意到当您滚动“关于”时，导航的隐藏部分会“跳起来”。我正在使用CSS重置。

HTML：

<nav>
    <ul class="menu">
        <li>
            <a>About</a>
            <ul class="sub-menu">
                <li><a>People</a></li>
                <li><a>Approach</a></li>
            </ul>
        </li>
        <li><a>Projects</a></li>
        <li><a>Contact</a></li>
    </ul>
</nav>

CSS：

nav li {
    display: inline-block;
    font-size: 10px;
    height: 10px;
    margin-right: 16px;
    text-transform: uppercase;
}

.sub-menu {
    display: inline-block;
    white-space: nowrap;
}​

JS：

$('.sub-menu').hide();

$('nav > ul > li').on({
    mouseenter: function() {
        $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
    },
    mouseleave: function(){
        $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
    }
});

小提琴： http://jsfiddle.net/HYPX8/

屏幕截图：

我尝试过只使用inline并发生同样的事情。

我尝试在所有li元素和float: left上使用.sub-menu，但后来我遇到了li个.sub-menu元素崩溃的问题mouseleave

有人可以推荐如何解决此问题吗？谢谢！

Answer 1

编辑0

如果您注释掉$('.sub-menu').hide();并切换宽度，您会发现问题在于JQuery如何更改CSS，因为它在加载时正确呈现。我会进一步调查。

此外，将宽度更改为高度会产生您可能想要使用的内容。见这里：http://jsfiddle.net/HYPX8/5/。

$(this).find('.sub-menu').stop().animate({height: 'toggle'});

---

解决方案示例： http://jsfiddle.net/HYPX8/2/。

将以下内容添加到.sub-menu CSS似乎可以防止发生丢弃。

height: 10px;
margin-right: 16px;

看起来如果你真的想要你可以组合CSS但是它在左边增加了一点填充。

nav li, .sub-menu {
    display: inline-block;
    font-size: 10px;
    height: 10px;
    margin-right: 16px;
    text-transform: uppercase;
}

但是，为了获得理想的结果，您需要的只是以下内容。

.sub-menu {
    display: inline-block;
    height: 10px;
    margin-right: 16px;
    white-space: nowrap;
}