子元素Hover效果失效：About Us下拉菜单无法触发显示

你的问题出在SCSS的选择器层级错误上。当前代码里，你在li的嵌套规则内写了.aboutus，这会被编译成.header_text ul li .aboutus——但实际上HTML里的.aboutus是li元素本身的类，不是li的子元素，所以这个选择器匹配不到目标元素，hover事件自然不会触发下拉菜单显示。

修复后的SCSS代码： #

.header_text {
    ul {
        display: flex;
        list-style: none;
        li {
            padding: 40px 15px;
            a {
                text-decoration: none;
                font-size: 23px;
                font-family: 'Varela Round';
                color: #5f3f00;
            }
            // 匹配带aboutus类的li元素
            &.aboutus {
                position: relative;
                &_content {
                    position: absolute;
                    top: 80px;
                    background-color: aqua;
                    display: none;
                    a {
                        display: block;
                        // 提升点击区域可用性
                        padding: 10px 15px;
                    }
                }
                &:hover {
                    &_content {
                        display: block;
                    }
                }
            }
        }
    }
}

关键修改点： #

• 将li嵌套内的.aboutus改为&.aboutus，编译后会生成.header_text ul li.aboutus，正确匹配到带aboutus类的列表项。
• 可选补充：给下拉菜单里的a标签添加padding，扩大点击区域，优化交互体验。

修改后，鼠标悬停「About Us」菜单项时，下拉菜单就能正常显示了。

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