悬停时Dropdown Button无法展开问题求助（附代码）

你的问题出在HTML代码的class属性语法错误上：

• 包裹下拉组件的div标签中，class属性写成了class=""dropin"，这里多了一个多余的双引号，导致浏览器无法正确识别dropin类名，进而CSS中的dropin:hover .dropdownmenu选择器无法生效。

修正后的HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>replit </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="dropin">
            <button class="dropdownbutton">dropdown button</button>
            <div class="dropdownmenu">
                <a href="#">List</a>
                <a href="#">List</a>
                <a href="#">List</a>
                <a href="#">List</a>
            </div>
        </div>
    </body>
</html>

CSS代码无需修改（保持原代码即可） #

.dropdownbutton{
    background-color: blue;
    color:white;
    padding:13px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropin{
    position:relative;
    display:inline;
}
.dropdownmenu{
    display: none;
    position: absolute;
    background-color: orangered;
    min-width: 150px;
}
.dropdownmenu a{
    color: black;
    padding: 11px 15px;
    display: block;
    text-decoration:none ;
}
.dropdownmenu a:hover {
    background-color: aliceblue;
}
.dropin:hover .dropdownmenu{
    display: block;
}
.dropin:hover .dropdownbutton{
    background-color: grey;
}

修正后，鼠标悬停在按钮或父容器上时，下拉菜单会正常展开，按钮背景色也会按预期变为灰色。

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