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更改就可以做到你想要的唯一方法就是这样。

DEMO

Answer 2

实际上你想要的东西是不可能的，因为你知道＆amp;你试过但如果你只想这样做，那么下面是一些方法，但我认为它不会满足你的需求：

方法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;
}

隐藏顶级列表项

2 个答案: