h3 和列表下拉菜单 CSS3

Question

有一个html列表，当您将鼠标悬停在我的示例中的<>元素(如"产品"(上时，可以使用CSS作为下拉菜单。但是我想要的是将鼠标悬停在 h3>(如我示例中的"联系人"(<相同的效果。可能吗？>

这是 html：

<h3>Contact</h3>
 <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Products &#9662;</a>
        <ul>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Printers</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

和CSS代码：

ul li ul {
    display: none;
}
ul li:hover ul{
    display: block; /* display the dropdown */
}

提前非常感谢你。

Answer 1

悬停时，您只能控制悬停在上面的元素的 CSS，或悬停在上面的元素(其子元素之一(中的元素的 CSS。因此，当您将鼠标悬停在h3上时，您无法使ul更改样式，因为它们 1( 不是同一个对象和 2( 没有父子关系(它们是兄弟姐妹(。

要在将鼠标悬停在 h3 上时显示菜单，您可以将它们都包装在另一个对象 ( div ( 中，并将其用于悬停事件。要区分两个悬停，您可以向两个悬停添加类名ul。

请参阅此 JSfiddle 或下面的代码：

<div class="container">
    <h3>Contact</h3>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products &#9662;</a>
            <ul class="submenu">
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

.container ul{
    display: none;
}
.container:hover ul.menu{
    display: block;
}
ul li ul.submenu {
    display: none;
}
ul li:hover ul{
    display: block; /* display the dropdown */
}

Answer 2

简而言之 - 你应该ul嵌套在h3

<h3>
    Contact
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Products &#9662;</a>
            <ul>
                <li><a href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>
</h3>

在你的 css 中：

ul li ul {
    display: none;
}
ul li:hover ul{
    display: block; /* display the dropdown */
}
h3 > ul {
     display: none;
}
h3:hover > ul {
    display: block;
}

这是演示： https://jsfiddle.net/mscehjLf/1/