悬停触发器与CSS重叠



我的refence 菜单结构上的双个子菜单li有问题

Talent
-Adult
--Men
--Woman
-Children
--Boys
--Girls

如果我将鼠标悬停在天赋上以打开"成人和儿童",这很好,但如果我将光标悬停在"成人"上,则会打开"男性"子菜单。但如果我试图滚动到它上,则将打开"男孩和女孩"子菜单。

短:悬停成人打开子菜单-悬停子菜单打开儿童子菜单

#menu-item-35:hover .sub-menu #menu-item-43 {
display: block;
opacity: 1;
}
#menu-item-35:hover .sub-menu #menu-item-40 {
display: block;
opacity: 1;
}
#menu-item-43{
padding-top:3px;
padding-left:3px;
}
#menu-item-43 .sub-menu li{
padding-top:3px;
}
#menu-item-40{
padding-top:3px;
padding-left:3px;
}
#menu-item-40 .sub-menu li{
padding-top:3px;
}
#menu-item-43 .sub-menu{
left:60%;
bottom: 0%;
}
#menu-item-40 .sub-menu{
left:60%;
top:0%;
}
#menu-item-43:hover  #menu-item-45 {
display: block;
opacity: 1;
transition: 0.5s;
pointer-events:all;
}
#menu-item-43:hover  #menu-item-44 { /*Male Sub */
display: block;
transition: 0.5s;
opacity: 1;
pointer-events:all;
}
#menu-item-40:hover .sub-menu #menu-item-42 {
display: block;
transition: 0.5s;
opacity: 1;
pointer-events:all;
}
#menu-item-40:hover .sub-menu #menu-item-41 {
display: block;
transition: 0.5s;
opacity: 1;
pointer-events:all;
}
#menu-item-31 a, #menu-item-28 a{
padding:5px!important;
}
#menu-item-40 .sub-menu{
padding-left:10px;
pointer-events:none;
}
#menu-item-43 .sub-menu{
padding-left:10px;
pointer-events:none;
}
#menu-item-35:hover{
border: none!important;
}
#menu-item-35 *{
padding-bottom: 1px!important;
}
#menu-item-35{
position: relative;
}
#menu-item-35 .sub-menu{
position: absolute;
}
<ul id="menu-main" class="menu">
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-19 current_page_item menu-item-39 active ">
<a href="https://kellyjeancasting.com/" aria-current="page">HOME</a>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38">    <a href="https://kellyjeancasting.com/about-main/">ABOUT</a>
</li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35">
<a href="https://kellyjeancasting.com/talent-main/">TALENT</a>
<ul class="sub-menu">
<li id="menu-item-43" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-43">
<a href="https://kellyjeancasting.com/talent-main/?vp_filter=category%3Aadult">Adults</a>
<ul class="sub-menu">
<li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45">
<a href="https://kellyjeancasting.com/talent-main/?vp_filter=category%3Amale">Male</a>               </li>
<li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44">
<a href="https://kellyjeancasting.com/talent-main/?vp_filter=category%3Afemale">Female</a>
</li>
</ul>
</li>
<li id="menu-item-40" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-40">
<a href="https://kellyjeancasting.com/talent-main/?vp_filter=category%3Achild">Kids</a>
<ul class="sub-menu">
<li id="menu-item-42" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42">       <a href="https://kellyjeancasting.com/talent-main/?vp_filter=category%3Aboy">Boys</a>
</li>
<li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41">       <a href="https://kellyjeancasting.com/talent-main/?vp_filter=category%3Agirl">Girls</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">
<a href="https://kellyjeancasting.com/contact-main/">CONTACT</a>
</li>
</ul>

item-35 = Talent
item-43 = Adults
item-45/44 = Adult-sub
item-40 = Kids
item-42/41 = Kids-sub

非常欢迎您访问网站并查看互动:Sitelink悬停人才并尝试悬停在男性或女性上

当"Adults"的上半部分悬停时有效,而不是在下半部分。为.menu li a添加outline: 1px solid red,然后您可以看到链接实际上比其包含的li大,因此部分重叠。

链接通过其顶部和底部填充从LI框中脱离,因为它们是内联元素。为链接添加display:block,然后根据实际需要的间距更正填充。

我已经更改了您的CSS

ul{
display:inline-block;
}
ul li{
position:relative;

}
ul li > ul{
position:absolute;
left:100%;
top:0;
width:60px;
display:none;  
}
ul li:hover > ul{
display:inline-block;
}

https://jsfiddle.net/lalji1051/a4uL73sz/5/

最新更新