如何在悬停时将我的导航停留在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?

的含义