垂直菜单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();
       });
   });