Html 悬停触发器重叠CSS

我的菜单结构上有一个双子菜单，供参考

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

如果我将鼠标悬停在“天赋”上，打开“成人”和“儿童”，这很好，但是如果我将鼠标悬停在“成人”上，则会打开“男子”子菜单，但如果我尝试在其上滚动，则会打开“男孩”和“女孩”子菜单

Short：悬停成人打开子菜单-悬停子菜单打开儿童子菜单

#菜单项-35：悬停。子菜单#菜单项-43{
显示：块；
不透明度：1；
}
#菜单项35：悬停。子菜单#菜单项40{
显示：块；
不透明度：1；
}
#菜单项-43{
垫面：3件；
左：3倍；
}
#菜单项43.子菜单li{
垫面：3件；
}
#菜单项-40{
垫面：3件；
左：3倍；
}
#菜单项-40.子菜单li{
垫面：3件；
}
#菜单项43.子菜单{
左：60%；
底部：0%；
}
#菜单项-40.子菜单{
左：60%；
最高：0%；
}
#菜单项43：悬停#菜单项45{
显示：块；
不透明度：1；
过渡：0.5s；
指针事件：全部；
}
#菜单项43：悬停#菜单项44{/*男性子菜单项*/
显示：块；
过渡：0.5s；
不透明度：1；
指针事件：全部；
}
#菜单项-40：悬停。子菜单#菜单项-42{
显示：块；
过渡：0.5s；
不透明度：1；
指针事件：全部；
}
#菜单项-40：悬停。子菜单#菜单项-41{
显示：块；
过渡：0.5s；
不透明度：1；
指针事件：全部；
}
#菜单项31 a、#菜单项28 a{
填充：5px！重要；
}
#菜单项-40.子菜单{
左侧填充：10px；
指针事件：无；
}
#菜单项43.子菜单{
左侧填充：10px；
指针事件：无；
}
#菜单项35：悬停{
边界：没有！重要；
}
#菜单项-35*{
填充底部：1px！重要；
}
#菜单项-35{
位置：相对位置；
}
#菜单项35.子菜单{
位置：绝对位置；
}

我已经更改了您的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;
}

---

当“成年人”的上半部分悬停时有效，而不是在下半部分。为

添加
轮廓：1px纯红色
。菜单li a
，然后您可以看到链接实际上比其包含的
li
更大，因此部分重叠

链接以其顶部和底部填充从LI框中断开，因为它们是内联元素。为链接添加
display:block
，然后将填充改为实际需要的间距。
“悬停天赋并尝试悬停在男性或女性上方”-我这样做了，然后单击“男性”，我在当前基于Chromium的浏览器中进行了测试。很有趣，如果你悬停在talent上，那么悬停在成人上，你就可以悬停在男人身上，而不必切换到child子菜单。悬停在“成人”的上半部分时有效，而不是在下半部分。为
添加
轮廓：1px纯红色
。菜单li a
，然后您可以看到链接实际上比其包含的
li
更大，因此部分重叠。链接以其顶部和底部填充从li框中断开，因为它们是内联元素。为链接添加
display:block
，然后将填充改为实际需要的间距。谢谢你想把它藏在答案中，这样我就可以接受你的答案了？