如何隱藏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; }