Show div on li hover jquery html

Show div on li hover jquery html

So it's all together possible that I've just been looking at this for too
long but I've debugged all my code and searched everywhere I know for an
answer.
Maybe this isn't possible, I'm not sure but here's what I'm trying to do.
I have unordered list displayed horizontally acting as my top level
navigation. when I hover over one of the items I want to show a div that
is the full width of the unordered list above it. here's my caveat: I'm
using wordpresss custom post type to do this. the unordered list is the
title of the post and I want to show the content in the div that is
revealed on hover. I have this working the content loading that's not the
issue, i can't seem to find the right jquery / css combination to make the
div that reveals match the width of the whole list. I might have to use
ajax? Not sure, I'm very unfamiliar with it.
Here's my code:
HTML
<div class="menu-header-container">
<ul>
<?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(); ?>
<li>
<a href="#"><?php the_title(); ?></a>
<div class="overlay">
<ul>
<li><?php the_field('sub_menu_item_one'); ?></li>
<li><?php the_field('sub_menu_item_two'); ?></li>
<li><?php the_field('sub_menu_item_three'); ?></li>
<li><?php the_field('sub_menu_item_four'); ?></li>
<li><?php the_field('sub_menu_item_five'); ?></li>
<li><?php the_field('sub_menu_item_six'); ?></li>
</ul>
</div>
</li>
<?php endwhile;?>
</ul>
</div>
CSS
.menu-header-container{
overflow: visible;
float: right;
margin-top: 4%;
}
.menu-header-container > ul > li{
margin-left: 20px;
display:inline-block;
float: right;
}
.overlay{
display: none;
position: absolute;
background: aqua;
}
jquery
<script>
$(".menu-header-container li").hover(function(){
$(this).find(".overlay").stop().fadeIn();
},function(){
$(this).find(".overlay").stop().fadeOut();
});
</script>
output
<div class="menu-header-container">
<ul>
<li>
<a href="#">Top Level one</a>
<div class="overlay">
<ul>
<li>item in sub div</li>
<li>item in sub div</li>
<li>item in sub div</li>
</ul>
</div>
</li>
<li>
<a href="#">Top Level two</a>
<div class="overlay">
<ul>
<li>item in sub div</li>
<li>item in sub div</li>
<li>item in sub div</li>
</ul>
</div>
</li>
</ul>
</div>
Here's a fiddle with my output as the html, so i want those top level
items on the same line and I want the revealing div to span the whole
width of the top level ul and my brain is fried.
jsfiddle