hover下拉项时二级下拉菜单不显示问题求助

嘿，我找到你的问题根源啦！

你遇到的问题出在CSS选择器的使用错误上：在你的HTML结构里，#sub（也就是显示"Link 3 »"的项）和.subDropdown是同级的相邻元素，而非父子关系。但你写的选择器#sub:hover .subDropdown是在寻找#sub内部的.subDropdown后代元素，这完全不符合你的DOM结构，所以hover事件根本触发不了二级菜单的宽度变化。

修正方案 #

把触发二级菜单的CSS选择器改成相邻兄弟选择器+，它会精准匹配紧跟在#sub之后的同级.subDropdown元素：

/* 替换原来的错误选择器 */
#sub:hover + .subDropdown {width: 250px;}

完整修正后的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;}

这样修改后，当你hover"Link 3"时，右侧的二级下拉菜单就会正常展开啦！

内容的提问来源于stack exchange，提问作者SteveyG