Fading sub-menus

HTML

<div class="menu">
  <ul>
    <li>Entry 1
      <ul>
        <li>Sub 1-1</li>
        <li>Sub 1-2</li>
        <li>Sub 1-3</li>
      </ul>  
    </li>
    <li>Entry 2                                
      <ul>
        <li>Sub 2-1</li>
        <li>Sub 2-2</li>
        <li>Sub 2-3</li>
      </ul>
    </li>
    <li>Entry 3
      <ul>
        <li>Sub 3-1</li>
        <li>Sub 3-2</li>
        <li>Sub 3-3</li>
      </ul>
    </li>      
  </ul>            
</div>

JavaScript

// Executes the function when DOM will be loaded fully
$(document).ready(function () { 
    // hover property will help us set the events for mouse enter and mouse leave
    $('.menu li').hover(
    // When mouse enters the element
    function () {
        //Fade in the navigation submenu
        $('ul', this).fadeIn("slow");  // fadeIn will show the sub cat menu
    }, 
    // When mouse leaves the element
    function () {
        //Fade out the navigation submenu
        $('ul', this).fadeOut("slow");  // fadeOut will hide the sub cat menu 
    });
});