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 */
}

CSS菜单在没有悬停时会下降

1 个答案: