如何隐藏subnav菜单，直到鼠标悬停？

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

一类添加到子菜单<ul>的，并添加CSS规则来设置display: none;例如：

<ul class="subMenu"> 

和

.subMenu { display: none; }