1

我制作了一个非常简单的导航元素。

它在 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/

截图：

在此处输入图像描述

我试过使用 justinline并且发生同样的事情。

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

谁能推荐如何解决这个问题？谢谢！

4

1 回答 1

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-menuCSS 似乎可以防止发生这种下降。

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;
}
于 2012-12-13T01:40:48.883 回答