Show div on li hover jQuery html -

so it's possible i've been looking @ long i've debugged code , searched everywhere know answer.

maybe isn't possible, i'm not sure here's i'm trying do. have unordered list displayed horizontally acting top level navigation. when hover on 1 of items want show div full width of unordered list above it. here's caveat: i'm using wordpresss custom post type this. unordered list title of post , want show content in div revealed on hover. have working content loading that's not issue, can't seem find right jquery / css combination make div reveals match width of whole list. might have use ajax? not sure, i'm unfamiliar it.

here's 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 fiddle output html, want top level items on same line , want revealing div span whole width of top level ul , brain fried.

jsfiddle

demo

css

ul,li{     margin:0;     padding:0; } li{     list-style-type:none; }