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