html - cssで3レベルのメニューナビゲーションを表示/非表示にする方法は？

Question

私はこのhtmlを持っています：

<ul>
  <li class="current"> level 1 </a>
    <ul>
      <li><a class="children">level 2</a>
        <ul>
          <li><a> level 3 </a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

css display none / blockを使用して簡単な表示/非表示を作成するにはどうすればよいですか？

現在これを行っていますが、私は2番目のレベルにしか到達できず、論理的に少し行き詰まっています。

ul ul,
ul ul ul {
   display: none;
}

.current .children {
   display: block;
}

Answer 1

非常に単純で、どこにでも数十の例があります。ちょっとした検索が役立つかもしれません。

ul ul {
    display: none;
}

ul > li:hover > ul {
    display: block;
}

ul > li > ul > li:hover ul {
    display: block;
}

Answer 2

jQuery を使用したい場合は、http://api.jquery.com/toggle/ を確認してください。

$('#yourlinkID').click(function() {
     $('#yourbodyID').toggle()
});

上記のコードは、#yourlinkID を持つ要素がクリックされたときに、#yourbodyID を持つ要素の可視性を切り替えます。

お役に立てれば ：）