jquery - 在 li hover jQuery html 上显示 div

Question

所以很可能我只是看这个问题太久了，但我已经调试了我的所有代码并在我知道的所有地方搜索了答案。

也许这是不可能的，我不确定，但这就是我正在尝试做的。我有水平显示的无序列表作为我的顶级导航。当我将鼠标悬停在其中一个元素上时，我想显示一个 div，它是其上方无序列表的整个宽度。这是我的警告:我正在使用 wordpresss 自定义帖子类型来执行此操作。无序列表是帖子的标题，我想在悬停时显示的 div 中显示内容。我有这个工作内容加载不是问题，我似乎无法找到正确的 jquery/css 组合来使显示的 div 匹配整个列表的宽度。我可能必须使用ajax？不确定，我对此很陌生。

这是我的代码:

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>

输出

<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>

这是一个将我的输出作为 html 的 fiddle ，所以我希望那些顶级元素在同一行上，并且我希望显示的 div 跨越顶级 ul 的整个宽度，我的大脑被炸了。

jsfiddle

Answer 1

在 li click 事件上添加此 $('#yourDivId').show();