CSS菜单在没有悬停时下拉

Posted 2023-05-08

【中文标题】CSS菜单在没有悬停时下拉

【英文标题】：CSS menu drops down when it isnt hovered over

【发布时间】：2013-04-21 23:04:51

【问题描述】：

我正在用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 */

EDIT 仍然不能在这里工作是我的 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>

【参考方案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 */

【讨论】：

@user2109242 让我们看看 html。

@user2109242 行后部分

@user2109242 再仔细看看。

@user2109242 那些是选择器再次看到编辑（在行下）