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

Answer 2

更改

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

到

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

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

Answer 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;
}

Answer 4

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

子菜单不会出现在悬停状态

4 个答案: