0

我是css新手，需要一些帮助...我有一个嵌套列表视图的示例...我想要的是，当我将鼠标悬停在链接上时，内部列表应该是可见的......我完成了这与 css 但问题是当我去点击内部列表的元素时，它再次隐藏....看到这个http://jsfiddle.net/t7mdf/ 那么我如何保持内部列表可见直到指针在内部列表中...

所以我在我的css风格中缺少什么......请告诉我..我的代码如下..

<ul class="main-menu">
<li>
    <a>First List</a>
    <ul class="sub-menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</li>
<li>
    <a>Second List</a>
    <ul class="sub-menu">
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</li>
<li>
    <a>Third List</a>
    <ul class="sub-menu">
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</li>

CSS是 .main-menu{list-style:none;} .sub-menu{display:none;} .main-menu a:hover + .sub-menu{display:block;}

4

2 回答 2

1

添加另一个 css 代码：

.sub-menu:hover{display:block;}
于 2013-08-16T07:10:43.213 回答
1

检查这个小提琴

ul.main-menu{list-style:none;
}
.sub-menu{display:none;}
ul.main-menu li {
    position: relative;
}
ul.main-menu li:hover ul.sub-menu {
    display: block;
}
于 2013-08-16T07:11:42.833 回答