悬停触发器重叠 CSS

如何解决悬停触发器重叠 CSS

我的菜单结构上的双子菜单 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 Hover Talent 并尝试将鼠标悬停在 Men 或 Woman 上

解决方法

在“成人”的上半部分悬停时有效，而不是在下半部分。为 outline: 1px solid red 添加 .menu li a，然后您可以看到链接实际上比它们包含的 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/