3

順序付けされていないリストのトップレベルのリストアイテムを非表示にする純粋な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を表示できないようです。助言がありますか？

4

2 に答える 2

2

構造にjavascriptやhtmlを変更せずに、やりたいことを実行する唯一の方法はその方法だと思います。

デモ

于 2012-07-01T08:11:44.953 に答える
0

実際、あなたが知っているように、あなたが望んでいることは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;
}
于 2012-07-01T08:26:06.287 に答える