How to control what to show / hide

How to control what to show / hide

Hello,

I made a navigation where i need to show a sub navigation when i hover a top navigation link. My problem is that i want it to hide again when im not either on the button(.news-btn) or the div i wrapped my sub in (.news-btn-sub-wrap)

Lets take i have navigation liket his

top navigation
<ul class="navigation">
      <li class="news-btn">News</li>
      <li class="about-btn">About</li>
</ul>

Sub navigation
<ul class="news-btn-sub-wrap">
      <li>Sub link 1</li>
      <li>Sub link 2</li>
</ul>

i want, if i have my mouse in the top navigation and move it to another button not to keep show the sub menu. This is ok if i have a button next to it with another sub menu, but i the button dont have sub menu, this is a problem.

the .js file

 $(document).ready(
    function(){
        $(".news-btn").mouseover(function () {
            $(".news-btn-sub-wrap").show();
        });
        $(".news-btn-sub-wrap").mouseleave(function() {
            $(".news-btn-sub-wrap").hide();
        });

    });

hope someone can help.

cheers