Jquery Dropdown Menu - Keep parent tab active?

I have created a simple dropdown menu using JQuery, how would I go about keeping the parent tab active until I mouseout from the sub menu(s) / parent tab?

      $('#main-nav a').bind('mouseover', function()
      {
            $(this).parents('li').children('ul').show();

            if($(this).parents('li').children('ul').size() > 0)
            {
                  $(this).parents('li:first').addClass('hover');
            }
      });

      $('#main-nav a').bind('mouseout', function()
      {
            $(this).parents('li').children('ul').hide();

      });

HTML:

    <div id="main-nav" class="border clearfix">
            <ul>
                  <li class="current"><a href=""><span>Home</span></a></li>
                  <li><a href=""><span>Portfolio</span></a></li>
                  <li>
                        <a href=""><span>About Us</span></a>
                        <ul class="clearfix sub-menu">
                              <li><a href="">Sub Navigation Tab</a></li>
                              <li><a href="">Sub Navigation Tab</a></li>
                              <li><a href="">Sub Navigation Tab</a></li>
                              <li>
                                    <a href="">About Us</a>
                                    <ul class="clearfix"> 
                                          <li><a href="">Tabby</a></li>
                                    </ul>
                              </li>
                        </ul>
                  </li>
                  <li><a href=""><span>Contact</span></a></li>
                  <li><a href=""><span>Blog</开发者_JAVA技巧span></a></li>
            </ul>
      </div>

You should bind the hover on the li instead of the a in the li.

Because the children are also in the li it will still be active.

Check out my simple example @ jsfiddle: http://jsfiddle.net/tUYfw/