如何隐藏子导航菜单直到鼠标悬停？

Question

我正在使用子导航菜单，它在鼠标悬停时为鼠标悬停设置动画。它工作得很好，除了在初始页面加载时，菜单默认显示。当您将鼠标移出并移出时，它会按预期消失，但我不知道如何在页面加载时隐藏它，然后使其在悬停时显示。

<script type="text/javascript">
function nav(){
$('.nav li').hover(function() {
     $(this).find('ul:first').stop().animate({height: '200px', opacity: '100'},    {queue:false, duration:200, easing: 'easeInSine'})
        }, function() {
     $(this).find('ul:first').stop().animate({height: '0px', opacity: '0'},    {queue:false, duration:100, easing: 'easeInCirc'}) 
      });
  };
  $(document).ready(function() {
    nav();
});
</script>

Answer 1

在子菜单

中添加一个类，并添加 css 规则来设置 display: none; 例如：

<ul class="subMenu">

和

.subMenu { display: none; }