悬停时不会出现子菜单答案

【问题标题】：sub-menu won't appear on hover悬停时不会出现子菜单
【发布时间】：2014-03-25 01:56:18
【问题描述】：

当鼠标悬停在主菜单项上时，我很难让 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%;
}

我们将不胜感激。我相信这对你们大多数人来说都很简单！

【问题讨论】：

标签： html css drop-down-menu

【解决方案1】：

您可以在将鼠标悬停在.dropdown 列表项上时将子菜单的可见性更改为可见：

.dropdown:hover ul {
    visibility: visible;
}

Fiddle Demo

【讨论】：

【解决方案2】：

改变

.dropdown ul
 {
     position: absolute;
     top: 43px;
     z-index: 100;
     visibility: hidden;
 }

到

.dropdown ul
 {
     position: absolute;
     top: 43px;
     z-index: 100;
     display:block;
 }

至少在你开始使用 JQuery 来打开/关闭它之前

【讨论】：

【解决方案3】：

您还可以使用 css 过渡为菜单设置动画。
所以改变你的css选择器

.dropdown ul{
    display:block;
    position: absolute;
    top: 43px;
    z-index: 100;
    overflow:hidden;
    background-color:red;
    height: 0px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
}

.dropdown:hover ul {
    visibility: visible;
    height:200px;
}

【讨论】：

【解决方案4】：

是的，正如其他人一直在评论的那样，您需要一些东西来切换下拉类的状态。这可以通过多种方式实现，可见性和定位是最广泛使用的两种。

【讨论】：