隐藏顶级列表项答案

【问题标题】：Hiding Top Level List Items隐藏顶级列表项
【发布时间】：2012-07-01 16:26:06
【问题描述】：

我正在寻找一种纯 CSS 解决方案来隐藏无序列表中的顶级列表项。例如：

顶级项目 1
顶级项目 2
- 子项 1
- 子项 2
- 子项 3
顶级项目 3

变成……

子项 1
子项 2
子项 3

最初我认为这会很简单。我像这样创建了一个简单的小例子......

<ul>
  <li> Top level item 1
  <li> Top level item 2
  <ul>
    <li> Sub item 1
    <li> Sub item 2
    <li> Sub item 3
  </ul>
  <li> Top level item 3
</ul>

使用类似...的样式对其进行样式化

.menu ul{
    display:none;
}
.menu ul li ul{
    display:inline-block;
}

...但似乎如果父 ul 被隐藏，那么我无法显示子 ul。有什么建议吗？

【问题讨论】：

标签： css html-lists

【解决方案1】：

我认为，在结构中不需要更改 javascript 和 html 即可实现所需的唯一方法。

DEMO

【讨论】：

【解决方案2】：

实际上，正如您所知并且您已经尝试过，使用 CSS 无法实现您想要的，但如果您只是想这样做，那么下面是一些方法，但我认为它不能满足您的需求：

方法一 http://jsfiddle.net/surendraVsingh/2SS9k/1/

ul > li {
  text-indent: -9999px;
  line-height: 1px;
}

ul > li > ul >li{
    text-indent: 0;
    line-height: 20px;
}

【讨论】：