CSS动态多级下拉菜单

Question

我最近开始尝试为自己开发一个简单的 Wordpress 主题，但后来在导航菜单方面遇到了困难。

下拉菜单将有多个元素和多个子菜单， future 需要添加更多。来自默认 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/