Javascript 如何在鼠标悬停前隐藏子AV菜单？

我正在使用一个子导航菜单，在那里它可以设置鼠标悬停的动画。它工作得很好，除了在初始页面加载时，默认情况下会显示菜单。当你把鼠标移到上面，它会像预期的那样消失，但我不知道如何在页面加载时隐藏它，然后让它显示在悬停状态

<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>

函数nav（）{
$（'.nav li'）.hover（函数（）{
$（this.find（'ul:first'）.stop（）.animate（{height:'200px'，opacity:'100'}，{queue:false，duration:200，easeInSine'}）
}，函数（）{
$（this.find（'ul:first'）.stop（）.animate（{height:'0px'，opacity:'0'}，{queue:false，duration:100，easeincrc'}）
});
};
$（文档）.ready（函数（）{
导航（）；
});

将类添加到子菜单

，并添加css规则以设置

显示：无例如：

<ul class="subMenu">

.subMenu { display: none; }