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();
});
});