Question

I am trying to slide down a sub menu when hovering over a#about and keep the sub menu visible until hovering over another option.

I also want to hide the sub menu if not hovering over a#about or nav#about. Help please.

$(document).ready(function () {
    $('a#about').hover(function(){
        $('nav#about').slideDown();
    });

    $('nav#about').hover(function(){
        $('nav#about').slideDown();
    });

    $('a#home').hover(function(){
        $('nav#about').slideUp();
    });

    $('a#products').hover(function(){
        $('nav#about').slideUp();
    });

    $('a#contact').hover(function(){
        $('nav#about').slideUp();
    });
});

=========================================
edited to include the html

<nav id="main" class="left">
    <a id="home" class="left active">Home</a>
    <a id="about" class="left" href="#">About</a>
    <a id="products" class="left" href="#">Products</a>
    <a id="contact" class="left" href="#">Contact</a>
</nav>

<nav id="about" class="left">
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
</nav>

Answer 1

I am trying to slide down a sub menu when hovering over a#about and
keep the sub menu visible until hovering over another option

Assuming all navigation divs have class attribute of nav and the navigation links are wrapped in a div or nav tag like this:

<div id="navigation">
    <a id="about" ...>About</a>
    <a id="home" ...>Home</a>
    <a id="products" ...>Products</a>
    <a id="contact" ...>Contact</a>
    <div class="nav" id="div-about" ...>...</div>
</div>

you can do something like this:

var menuTimeout;
$('#navigation a, #navigation .nav').hover(function() {
    hovered_div = $('#navigation #' + 'div-' + $(this).attr('id').replace('div-',''));
    $('#navigation .nav').not(hovered_div).hide();
    (hovered_div.css('display') == 'none') && hovered_div.slideDown();
    clearTimeout(menuTimeout);
}, function() {
       menuTimeout = setTimeout(function() { $('#navigation .nav').slideUp(); }, 1000);
   });
});

It basically binds to hover event of anchors and elements of nav class and hides all the nav divs except the current div (the hovered one) and slidesDown the hovered div if it’s not visible, also when navigation divs or anchors are not hovered, it slides up the divs after 1 second using setTimeout().

See the Demo.