悬停离开父级元素隐藏父级元素，悬停在子级元素却也隐藏了父级

Question

// html<div class="sidebar-attach">    <div id="secondary-nav">
        <ul>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
            <li><a></a></li>
        <ul/>
    </div></div>

 // js
 $('.sidebar-attach').on('mouseout',function(){
    $('.sidebar-attach').hide();
 });

原意是离开sidebar-attach的时候就隐藏它，现在鼠标悬停在其中的secondary-nav、ul、li、a的时候都会隐藏掉它，应该如何去修改？