Empêcher le sous-menu de disparaître

Bonjour,
J'ai fait un menu avec jQuery. Lorsqu'on passe avec la souris sur un élément, cela fait apparaître un sous-menu. Je ne sais pas comment faire pour que le sous-menu reste quand on est dessus, mais disparaisse quand on sort de l'élément principal ou du sous-menu. Si quelqu'un pouvait m'aider.
Voici l'html

<div id="menu">
        <ul id="nav">
            <li class="nav" id="portfolios"><a href="#"></a></li>
            <li class="nav" id="bio"><a href="#"></a></li>
            <li class="nav" id="contact"><a href="#"></a></li>
        </ul>
            <ul id="chap">
                <li class="chap" id="por"><a href="#"></a></li>
                <li class="chap" id="tra"><a href="#"></a></li>
                <li class="chap" id="pri"><a href="#"></a></li>
                <li class="chap" id="sti"><a href="#"></a></li>
                <li class="chap" id="ful"><a href="#"></a></li>
                <li class="chap" id="adv"><a href="#"></a></li>
            </ul>       
    </div>

Et le js

jQuery().ready(function(){
    $("#chap").hide();
    $("#portfolios").mouseover(function(){
        if($("#chap").is(":hidden")){
            $("#chap").fadeIn(200);
        }
    });
$("#portfolios").mouseout(function(){
        if($("#chap").is(":visible")){
            $("#chap").fadeOut(200);
        }
    });
});