CSS下拉菜单悬停效果

Question

我试图制作一个简单的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>

Answer 1

试试这个:

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

小提琴

问题是你的菜单ul是可见的(总是),但由于这个规则的选择器,它们里面的li是不可见的(总是)ul#sub1 li.

请记住可见性:隐藏隐藏元素但仍占用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;
}

小提琴