How to control what to show / hide

How to control what to show / hide


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>

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

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

        $(".news-btn").mouseover(function () {
        $(".news-btn-sub-wrap").mouseleave(function() {


hope someone can help.