html - 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;
}

Fiddle

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

请记住，visibility: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;
}

Fiddle