Jquery hover issue, how would you solve this?

JavaScript
1

Hi,

I’m making a big menu, with drop downs that span the entire page-width, so I guess because of this I have to position the drop-down outside of the <li> that I hover for displaying the drop-down. So what is happening when i hover the <li> is that the drop-down is showing, but as soon as i try to move the mousecursor over the drop-down the drop-down is closed. I guess this is beacause the drop-down isnt placed inside the <li>. But if i place it inside the <li> I doesnt get the full-page width, it wont break the grid that I am using.

How could I solve this/take another approach?

My code looks something like this:

<div class="wrapper">
<ul class="menu">
<li><button class="show-drop-down">hoverthis</button><li>
<li><button class="show-drop-down">hoverthis</button><li>
<li><button class="show-drop-down">hoverthis</button><li>
</ul>
</div>

<div class="drop-down-wrapper">
<ul class="drop-down">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>

.menu{
width: 70%;
margin: 0 auto;
height: 100px;
}

.drop-down-wrapper{
position: absolute;
top: 100px;
left: 0;
width: 100%;
}

.drop-down{
width: 70%;
margin: 0 auto;
}

$(document).ready(function(){
    $('.drop-down-wrapper').hide();
    $('.menu li').hover(function(){
        $('.drop-down-wrapper').toggle();
    });
});