Показать/скрыть вложенный div jquery html

Question

Хорошо, поэтому я пытаюсь создать навигацию, используя неупорядоченный список, который показывает div при наведении курсора. Я работаю в WordPress цикле, так что это мой 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> 

Эта часть кажется работает нормально. Это мой JQuery:

<script> 
    $(".menu-header-container li").hover(function(){ 
     $(this).find(".overlay").stop().fadeIn(); 
    },function(){ 
     $(this).find(".overlay").stop().fadeOut(); 
    }); 
</script> 

Это мой 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; 
} 

А вот мой выход:

<div class="menu-header-container"> 
    <ul> 
     <li> 
      <a href="#">Knowledge Center</a> 
      <div class="overlay"> 
       <p>test</p> 
      </div> 
      <a href="#">Client Services</a>  
      <div class="overlay"> 
       <p>Technology For You</p> 
      </div> 
</div> 

Так что, когда я наведите курсор на одну из позиций он показывает все, все вложенные divs, я думаю, что это проблема jquery, которую я имею, но это может быть wordpress.

Answer 1

Ваш 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> 
     </li> 
    </ul> 
</div>