CSS下拉菜单悬停效果

小编典典

CSS下拉菜单悬停效果

css

我试图做一个简单的CSS下拉菜单。当您将鼠标悬停在链接上时，我无法实现下拉子菜单。以下是我的HTML和CSS规则，谢谢。

    ul#menu li
    {
        position:relative;
        list-style-type:none;
        float: left;
        padding:0px;
        width: 125px;
        height: 25px;
    }
    ul#sub1 li
    {
        position:absolute;
        left:0;
        width:125px;
        visibility: hidden;
    }
    ul#menu li:hover #sub1
    {
        visibility:visible;
    }


    <ul id="menu">
        <li><a href="#">Hyperlink 1</a></li>
        <li><a href="#">Hyperlink 2</a>
            <ul id="sub1"> 
                <li><a href="#">Hyperlink 2.1</a></li>
                <li><a href="#">Hyperlink 2.2</a></li>
            </ul>
        </li>
        <li><a href="#">Hyperlink 3</a></li>
        <li><a href="#">Hyperlink 4</a></li>
    </ul>

阅读 280

2020-05-16

共1个答案

小编典典

尝试这个：

ul#sub1 {
    position:absolute;
    left:0;
    width:125px;
    visibility: hidden;
}
ul#menu li:hover #sub1 {
    visibility:visible;
}

问题是您的菜单ul是可见的（始终），但是由于this规则的选择器，所以li里面的li是（始终）不可见ul#sub1 li。

请记住，visible：hidden隐藏元素，但仍在DOM中占用空间，而display：none隐藏元素并将其从页面元素流中移除

另外，您不一定不需要在CSS选择器中使用ID，尤其是对于像这样的菜单。您可以不这样做而已，可以考虑使用许多级别菜单的情况，通过使用ID，您将不得不无限期地编写选择器。相反，您可以尝试这样的事情。

ul#menu ul {
    padding:0px;
}
ul#menu li {
    position:relative;
    list-style-type:none;
    float: left;
    width: 125px;
}
ul#menu li > ul {
    display: none;
}
ul#menu li:hover > ul {
    display:block;
}

2020-05-16