Show / Hide nested div jquery html

Show / Hide nested div jquery html

Ok so I'm trying to build a nav using a unordered list that shows a div
when on li hover. I'm working within the wordpress loop so this is my
HTML:
<div class="menu-header-container">
<ul>
<li>
<?php
$args = array(
'post_type' => 'menu',
'post_status' => 'publish',
'posts_per_page' => 10,
'offset' => 0,
'order' => 'ASC'
);
$the_query = new WP_Query( $args ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<a href="#"><?php the_title(); ?></a>
<div class="overlay">
<p><?php the_field('sub_menu_item_one'); ?></p>
</div>
This parts seems to be working fine. This is my jquery:
<script>
$(".menu-header-container li").hover(function(){
$(this).find(".overlay").stop().fadeIn();
},function(){
$(this).find(".overlay").stop().fadeOut();
});
</script>
This is my CSS
.menu-header-container{
overflow: visible;
float: right;
width: 74%;
margin-top: 4%;
}
.menu-header-container li{
position: relative;
display: block;
height: 100%;
}
.menu-header-container ul li a{
float: right;
padding-left: 5%;
font-size: 1.3125em;
font-family: 'MuseoSans300';
text-transform: capitalize;
display: block;
}
.overlay{
display:none;
}
li > .overlay {
position: absolute;
top: 100%;
left: 25%;
overflow: visible;
}
So when I hover over one of the line items it shows everything in all the
nested divs, I think its a jquery issue I'm having but it may be
wordpress.