css - CSS菜单在未悬停时下拉

Question

我正在css中制作一个菜单，当我将鼠标悬停在某个块上时我希望它下拉，但现在当我打开网页时它开始下拉。这是我的代码

#header_menu.li: ul.dropdown{
display: none;
}

#header_menu.li: ul.dropdown hover {
    display: block;
    position absolute;
    margin: 0 0 0 -15px;
    bottom: 60px;
    /* makes drop up start at top of footer */
    border: 1px solid #111111;
    border-bottom: none;
    background: rgba(0,0,0,0.5);
    border-radius: 7px 0px 0px 0px;
    /* top left corner, top right corner, bottom right corner, bottom left corner */
}

编辑仍然不在这里工作是我的 html

   <li> <a href = "#"> Account </a> 
            <ul class = "dropdown">

            <li><a href = "#"> Standings</li>

            <li><a href = "#"> Playoff Picture</li>

            <li><a href = "#"> Group Chat</li>

            <li><a href = "#"> Schedule</li>

            </ul>
        </li>

Answer 1

您的选择器不正确

#header_menu.li: ul.dropdown

应该

#header_menu.li ul.dropdown

和

#header_menu.li: ul.dropdown hover

应该

#header_menu.li:hover ul.dropdown

也就是说，如果li是一个类而不是一个<li>标签

---

编辑并且li是一个标签所以

#header_menu li ul.dropdown{
    display: none;
}

#header_menu li:hover ul.dropdown{
    display: block;
    position absolute;
    margin: 0 0 0 -15px;
    bottom: 60px;
    /* makes drop up start at top of footer */
    border: 1px solid #111111;
    border-bottom: none;
    background: rgba(0,0,0,0.5);
    border-radius: 7px 0px 0px 0px;
    /* top left corner, top right corner, bottom right corner, bottom left corner */
}