how to hide a subnav menu until mouseover?

I'm working with a sub-navigation menu, where it animates the drop on mouseover. It's working great, except for that on the initial page load, the menu is showing by default. When you mouse over and out, it disappears as expected, but I can't figure out how to hide it on page load, and then make it appear on hover.

<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();
});
</s开发者_运维问答cript>

Add a class to the submenu <ul>'s and add css rule to set display: none; For example:

<ul class="subMenu">

and

.subMenu { display: none; }