2

我将此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/

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

4

1 回答 1

0

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

刚刚添加到你的CSS的末尾：

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

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

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

编辑：您需要将 ul 隐藏在 li 中，并且仅在“悬停”它时才显示它。

于 2013-07-10T22:07:59.757 回答