在li-hover jQuery html上显示div

Question

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

也许这是不可能的，我不确定，但这是我要做的。我有一个水平显示的无序列表，作为我的顶级导航。当我把鼠标悬停在其中一个项目上时，我想显示一个div，它是上面无序列表的全宽。无序列表是文章的标题，我想在悬停时显示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的输出，所以我希望这些顶级项目在同一行，我希望显示的div跨越顶级ul的整个宽度，我的大脑被炸了。

jsfiddle

Answer 1

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

Answer 2

演示

css

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

Answer 3

给li标签id并使用jquery

$('#liId').click(function() {
  $('#divId').css('display': 'none');
});

或者，您可以创建一个函数，在单击相应的li 时打开和关闭div显示比例

$('#liId').toggle(function() {
  $('#divId').css('display': 'none');
}, function() {
  $('#divId').css('display': 'block');
});