html - 下拉菜单中的二级下拉菜单未显示

Question

我无法让二级下拉菜单出现在我悬停的其中一个下 zipper 接的右侧，但它没有出现..

我已经使用边距相应地定位了二级下拉菜单。如果您将 .subDropdown 类的宽度更改为一个值，例如100px，你可以看到下拉菜单就在它应该在的地方..所以我不确定为什么当我在“悬停”事件中编码时它没有改变..

https://jsfiddle.net/yje82den/

看不到我错过了什么..

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;
}

这是更新后的 fiddle :https://jsfiddle.net/yje82den/2/