Question

我已将此css添加到我的垂直菜单中以创建下拉列表...

vertical-nav ul li ul{
    display:none;
    list-style-type:none;
    width:125px;
    padding:0px;
    margin-top:3px;
    margin-left:-5px;
}
vertical-nav ul li:hover ul{
    display:block;
}
vertical-nav ul li:hover ul li{
    background-color:#555555;
    width:125px;
    height:30px;
    display:inline-block;
}
vertical-nav ul li ul li:hover{
    background-color:#333333;
}
vertical-nav ul li ul li a{
    color:#FFF;
    text-decoration:underline;
}
vertical-nav ul li ul li a:hover{
    text-decoration:none;
}

和HTML：

<li><a href="index.php?id=resellers">Staff</a>
<ul class="sub-menu">
    <li><a href="#">Dropdown 1</a></li>
    <li><a href="#">Dropdown 2</a></li>
    <li><a href="#">Dropdown 3</a></li>
</ul>
</li>

这是一个示例JSFIDDLE：http://jsfiddle.net/3W8kE/

任何想法为何不起作用？下拉菜单不断显示

Answer 1

我编辑了你的小提琴： http://jsfiddle.net/q9eK6/

刚刚添加到你的CSS结尾：

.vertical-nav li ul {display: none;}

.vertical-nav li:hover ul {display: block;}

它会以你想要的方式工作。注意：我没有更正颜色和对齐方式。

编辑：你需要在里面隐藏ul并且只在你“悬停”它时显示它。

将子菜单添加到垂直菜单

1 个答案: