css - 隐藏顶级列表项

Question

我正在寻找一种纯 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。有什么建议么？

Answer 1

我认为在不需要更改结构的 javascript 和 html 的情况下做你想做的事情的唯一方法就是这样。

演示

Answer 2

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

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

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

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