Question

我无法将辅助下拉菜单显示在我悬停的其中一个下拉链接的右侧，但它没有出现..

我已使用边距相应地定位了辅助下拉菜单..如果您将 .subDropdown 类的宽度更改为例如100px，你可以看到下拉列表应该是...所以我不确定为什么当我在“悬停”中进行编码时它不会改变。事件..

看不到我错过的东西..

HTML：

<div class="navbtn">
<p>MENU BUTTON</p>

<div class="dropdown">
    <div class="dropdownitem">Link 1</div>
    <div class="dropdownitem">Link 2</div>
    <div class="dropdownitem" id="sub">Link 3 &#8594;</div>
    <div class="subDropdown">
        <div class="dropdownitem">Link 4</div>
        <div class="dropdownitem">Link 5</div>
        <div class="dropdownitem">Link 6</div>
    </div>
</div>

CSS：

.navbtn {
background-color: #009337;
max-width: 250px;   
}

.dropdown {
height:0;
overflow: hidden;
transition: height 0.5s;
}

.dropdownitem {
background-color: #00bf48;
border-top: 1px solid rgba(0,0,0,0.4);
padding: 10px;  
transition: background-color 0.5s;
}
.dropdownitem:hover {background-color:#43e27f;}

.subDropdown .dropdownitem {
background-color: #23f171;
}

.subDropdown {
position: fixed;
margin: -39px 0 0 250px;
height: 120px;
width: 0;
overflow: hidden;
transition: width 0.5s;
}

.navbtn:hover .dropdown {height:115px;}
#sub:hover .subDropdown {width: 250px;}

Answer 1

下拉列表.subDropdown不是#sub的后代，因此选择器#sub:hover .subDropdown将无效。

相反，您可以使用sibling selector（+），因为子下拉列表紧跟在DOM中的#sub div之后。

此外，您可以在相同的样式上添加.subDropdown:hover，以确保当您将鼠标悬停在子链接上时，菜单仍会保持打开状态。

#sub:hover + .subDropdown,
.subDropdown:hover {
  width: 250px;
}

这是更新的小提琴：https://jsfiddle.net/yje82den/2/

下拉菜单中的辅助下拉菜单未显示

1 个答案: