If you're looking to make your code effective without nesting your div within the Main-div
simply ensure that the li has the same height as the div container and check if the mouse hovers over the drop div when leaving the li, as shown in the following code snippet:
$(document).ready(function(){
$(".drop").hide();
$(".link-1 ").mouseenter(function(){
$('.link-1-drop').slideDown("fast");
});
$(".link-1").mouseleave(function(){
if($(".link-1-drop:not(:hover)").length>0)
$('.link-1-drop').slideUp("fast");
});
$(".link-1-drop").mouseleave(function(){
if($(".link-1:not(:hover)").length>0)
$('.link-1-drop').slideUp("fast");
});
});
*{
margin: 0;
padding: 0;
}
.main-nav{
width: 400px;
display: block;
background-color: #ccc;
margin: 0 auto;
{/*commented out height to match li height */}
{/* height:20px;*/}
}
.drop{
width: 100%;
height: 250px;
background: #0ff;
position:absolute;
left:0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li class="link-1">Link 1</li>
</ul>
<div class="link-1-drop drop">
drop down content
</div>
Alternatively, a better approach is to place your drop div inside the li and adjust the CSS by adding to it:
.drop {
...
position:absolute;
left:0;
}
Here's an example of how to do this:
$(document).ready(function() {
$(".drop").hide();
$(".link-1 ").mouseenter(function() {
$('.link-1-drop').slideDown("fast");
});
$(".link-1").mouseleave(function() {
$('.link-1-drop').slideUp("fast");
});
});
* {
margin: 0;
padding: 0;
}
.main-nav {
width: 400px;
display: block;
background-color: #ccc;
margin: 0 auto;
height: 20px
}
.drop {
width: 100%;
height: 250px;
background: #0ff;
position: absolute;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li class="link-1">Link 1
<div class="link-1-drop drop">
drop down content
</div>
</li>
</ul>