jquery - 悬停在导航栏下方时，如何获取 div？

Question

在静止状态下，导航菜单如下所示。

当我将鼠标悬停在它上面时，它会将白色空间向下推。

自然，我不希望这种情况发生，但我不知道如何让它保持原样。我的 JQuery 看起来像这样。

$( document ).ready(function() {

        $('li').mouseover( function() {
           $(this).animate({height: "40px"}, 300 );
        });
        $('li').mouseout( function() {
           $(this).animate({height: "18px"}, 300 );
        });

});

我的导航是典型的 ul 与display: inline-block; 我想要的是它只是悬停在白色空间上，忽略它？我怎么能这样做？

另外，当我询问导航时，有没有办法让它保持悬停而不反弹几次？

Answer 1

动画导致 div 放大。我建议将 div 设置为最终大小，从底部的白色（或主体 BG 颜色）条开始，动画可以自然地变成。

Answer 2

您需要玩弄CSS导航的定位。如果你做到了，position: absolute它不会影响页面上它之外的其他元素div。

它可能会稍微破坏原始定位，但很容易恢复到您想要的位置。

不太清楚你的意思and not bounce a couple times?