2

我正在寻找一些非常简单的垂直多级菜单，但我没有找到任何东西。例如，我对菜单的想法是这样的：

<ul id="menu">
<li><a href="#">Item 1</a></li>
<li class="parent"><a href="#">Item 2</a>
    <ul>
        <li> <a href="#">Sub 1</a></li>
        <li> <a href="#">Sub 2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a>
    <ul>
        <li> <a href="#">Sub 1</a></li>
        <li> <a href="#">Sub 2</a></li>
    </ul>
</li>
<li><a href="#">Item 6</a></li>

我想首先隐藏所有子类别。如果我单击某个类别，页面将加载，并且带有 class="parent" 的类别将显示其类别。我的问题是，我怎样才能只用 css 来达到这个目的？

4

3 回答 3

2

这基本上是悬停菜单的工作原理；<ul>默认隐藏并在悬停时显示。

jsFiddle

#menu li > ul {
    display:none;
}

#menu li:hover > ul {
    display:block;
}

如果您也想.parent显示，只需将其与悬停规则一起放入：

jsFiddle

#menu li:hover > ul,
#menu li.parent > ul{
    display:block;
}
于 2013-03-29T13:31:38.980 回答
0

要隐藏您需要将这些添加到 css 文件的子类别

#menu li > ul { display:none;}
于 2013-03-29T13:36:40.240 回答
0 
#menu ul li ul {display: none;}
#menu ul li.parent ul {display: block;}
于 2013-03-29T13:31:57.360 回答