css - 禁用或启用css中另一个类的类的可见性

Question

当我将鼠标悬停在 CSS 中的父类上时，我在启用类的可见性时遇到了困难。即我想在菜单类上启用悬停效果的子菜单类。我的html代码如下：

<li class="menu"><a href="#">Link</a></li>
        <ul class="subMenu">
            <li><a href="#">Link A</a></li>
            <li><a href="#">Link B</a></li>
            <li><a href="#">Link C</a></li>
        </ul>

对应的css如下：

    .subMenu
{
    display:none;
    visibility:hidden;
}

.menu:hover .subMenu
{
    display:inherit;
    visibility:visible;    
}

现在我对悬停效果有困难。

Answer 1

您需要menu ul在 main中添加 sub li。目前它在外面，li所以它在悬停时不可见。

像这样更改您的html

<ul>
    <li class="menu"><a href="#">Link</a>
        <ul class="subMenu">
            <li><a href="#">Link A</a></li>
            <li><a href="#">Link B</a></li>
            <li><a href="#">Link C</a></li>
        </ul>
    </li>
</ul>

演示