jQuery水平滑动切换导航

我希望制作一个简单的嵌套导航菜单，在悬停状态下水平向左“滑动”或“弹出”。我认为实现这一点的唯一方法是使用jQuery，所以我一直在使用它

初始状态

悬停状态

编辑：我意识到这张图片看起来有点不对。我希望整个ul子菜单（即：人员和方法）一起滑出，而不是按顺序滑出

总的结构是：

<nav>
<ul>
    <li>ABOUT
        <ul class="sub-menu">
            <li>PEOPLE</li>
            <li>APPROACH</li>
        </ul>
    </li>
    <li>PROJECTS</li>
    <li>CONTACT</li>
</ul>
</nav>

目前我的李是浮动的

我的问题是，当我将鼠标悬停在父LI上时，.sub菜单会淡入，但会向下一行，并且由于浮动，所有内容都会跳转

---

有人能给我指出正确的方向吗？

这就是你想要的吗？我相信CSS中缺少了一个

display:inlineblock

属性。通过使用内联块，具有该特性的每个元素将保留块特征（宽度、高度等），但也将保持内联（前后无中断）。如果没有块零件，应用宽度修改是没有意义的

CSS:

李海军{
显示：内联；
列表样式：无；
}
.子菜单{
显示：内联块；
空白：nowrap；
填充：0；
保证金：0；
}

Javascript:

$（函数（）{
$（'.sub-menu'）.hide（）；
$（'.link'）。悬停(
函数（）{
$（'.sub-menu'，this.stop（）.animate({
宽度：“切换”，
不透明度：“切换”
}/*[，持续时间以毫秒为单位]*/）；
}
);
});

HTML:

关于

人
接近


项目

一个
两个


接触

此外，您不需要宽度：100%。我只是添加了这一点，以便于测试。：）啊。我想最大的问题是空白：nowrap。这导致了文字的崩塌，看起来很古怪。现在我只需要弄清楚，当你将鼠标悬停在菜单的子菜单上时，如何使菜单保持打开状态。根据你的最新请求进行了修改。现在应该保持打开状态，直到用户移动到其他父li。看看修改后的HTML（这最终可能会改变，但我认为它说明了这个概念）。

$("nav li").on('hover', function(){
    $(this).children(".sub-menu").animate({width: 'toggle'});
});

<style type='text/css'>
    nav li {
        display: inline;
        list-style: none;
    }

    .sub-menu {
        display: inline-block;
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }
</style>

<script>
    $(function() {
        $('.sub-menu').hide();

        $('.link').hover(
            function() {            
                $('.sub-menu', this).stop().animate({
                    width: 'toggle',
                    opacity: 'toggle'
                } /* [, duration in ms] */);
            }
        );
    });
</script>

<nav>
    <ul>
        <li class="link">ABOUT
            <ul class="sub-menu">
                <li>PEOPLE</li>
                <li>APPROACH</li>
            </ul>
        </li>
        <li class="link">PROJECTS
            <ul class="sub-menu">
                <li>ONE</li>
                <li>TWO</li>
            </ul>
        </li>
        <li>CONTACT</li>
    </ul>
</nav>