javascript - 垂直メニューcss3

Question

サブメニューを使用した垂直メニューの作成に固執しています。

<ul>
    <li>Home</li>
    <li>Pages
        <ul>
            <li>Subpage</li>
            <li>Subpage 2</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>

「ページ」をクリックすると、メニューは次のようになります。

Answer 1

基本的なメカニズムは次のように実現できます。

ul li ul {
  display: none;
  margin-left: 20px;
}

li:hover ul {
  display: block;
}

jsFiddle： http: //jsfiddle.net/elias94xx/sCXus/

---

画像を使用しないと、上記の画像で効果を実現するのは少し難しいですが、適切な例が機能しています。

jsFiddle： http: //jsfiddle.net/elias94xx/sCXus/5/

Answer 2

これを試して

1. このCSSを使用します。

   ul{
       list-style:none;
   }
   ul li ul{
       list-style:none;
       display:none;
   }
   

2. jQueryライブラリとこの関数を適用します。

   $(document).ready(function(){
       $("ul li").click(function(){
           $(this).children('ul').show();
       });
   });