Question

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

<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达到这个目标？

Answer 1

这基本上就是悬停菜单的工作原理;默认情况下隐藏<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;
}

Answer 2

#menu ul li ul {display: none;}
#menu ul li.parent ul {display: block;}

Answer 3

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

#menu li > ul { display:none;}

简单的垂直多级菜单

3 个答案: