css - CSS 动态多级下拉菜单

Question

我最近开始尝试为自己开发一个简单的 Wordpress 主题，但后来我的导航菜单碰壁了。

下拉菜单将有多个项目和多个子菜单，将来需要添加更多。默认 Wordpress 主题的示例 - http://i.imgur.com/zhhbH.png

我想知道菜单背后有什么样的 CSS 能够无限制地动态添加另一个项目和子菜单。

谢谢

Answer 1

试试这个：

CSS：

li ul {
  display: none;
}

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

HTML：

​<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>
        Item 3
        <ul>
            <li>Subitem 3.1</li>
            <li>Subitem 3.2</li>
            <li>
                Subitem 3.3
                <ul>
                    <li>Subitem 3.3.1</li>
                    <li>Subitem 3.3.2</li>
                    <li>Subitem 3.3.3</li>
                </ul>                    
            </li>
        </ul>
    </li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

演示：http: //jsfiddle.net/TKBdY/