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();
       });
   });