css 悬停时下拉按钮不下拉

6za6bjd0 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(124)

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

我检查了每一个单词和标签，我按照YouTube的过程中的自由代码营，但它仍然不工作.这是YouTube视频的链接.（https://youtu.be/nu_pCVPKzTk?t=11602）

css

来源：https://stackoverflow.com/questions/74958481/dropdown-button-does-not-dropdown-on-hover