h3 和列表下拉菜单 CSS3

Question

当您将鼠标悬停在

元素（如我的示例中的 "Products"）时，html 得到一个用作下拉菜单的 CSS 列表。但是我想要的是在我的示例中将鼠标悬停在 < h3 > 上时的相同效果，例如 "Contact" 。可能吗？

这是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

简而言之 - 您应该将 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/

Answer 2

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

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

See this 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 */
}

h3 和列表下拉菜单 CSS3

h3 and list dropdown menu CSS3

html

css

drop-down-menu