问题描述
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;
}