html - 悬停时不会出现子菜单

Question

当鼠标悬停在主菜单项上时，我很难让 css 显示菜单。如何在悬停主菜单时选择子菜单？

HTML

      <ul class="mainNav">
            <li><a href="">Home</a></li>
            <li class="dropdown"><a href="">Treatments</a>
                <ul>
                    <li><a href="">Body Treatments</a></li>
                    <li><a href="">Make Up</a></li>
                    <li><a href="">Skincare</a></li>
                </ul>
            </li>
            <li><a href="">Gallery</a></li>
        </ul>

CSS

.mainNav
{
height: 43px;
list-style: none;
}
.mainNav li
{
float: left;
position: relative;
border-right: 1px solid #f0f986;
font-size: 1.15em;
height: 50px;
list-style-type: none;
}
.mainNav li a
{
text-decoration: none;
padding: 13px 1.03em 10px;
display: block;
white-space: nowrap;
font-size: 1.3em;
font-weight: 600;
color: White;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}
.mainNav li a:hover, .mainNav li a:focus
{
color: #dbeaa5;
background: #404e11;
}
.mainNav span
{
font-size: 19px;
position: relative;
right: -5px;
top: 2px;
line-height: 1px;
}

.dropdown ul
{
position: absolute;
top: 43px;
z-index: 100;
visibility: hidden;
}
.dropdown ul li a
{
background: none;
text-align: left;
display: block;
}
li li
{
width: 100%;
}

如有任何帮助，我们将不胜感激。我相信这对你们大多数人来说都非常简单!

Answer 1

当悬停在 .dropdown 列表项上时，您可以将子菜单的可见性更改为可见:

.dropdown:hover ul {
    visibility: visible;
}

Fiddle Demo