jquery css 带有来自无序列表的子级别的垂直下拉菜单

Question

我想将无序列表转换为垂直下拉菜单，如本例所示：http://www.jqueryscript.net/demo/Vertical-Responsive-Multi-level-Nav-Menu-with-jQuery-CSS3/

有没有简单的方法可以做到这一点？我试过上面的例子但是没有用，

这是我的结构：

            <ul>
                <li>
                    <div>text</div>
                </li>
                <li>
                    <div>text</div>
                    <ul>
                        <li>
                            <div>text</div>
                        </li>
                        <li>
                            <div>text</div>
                        </li>
                    </ul>   
                </li>
                <li>
                    <div>text</div>
                    <ul>
                        <li>
                            <div>text</div>
                        </li>
                        <li>
                            <div>text</div>
                        </li>
                    </ul>   
                </li>
                <li>
                    <div>text</div>
                </li>
                <li>
                    <div>text</div>
                </li>
            </ul>

Answer 1

这是一个基本示例： http://jsfiddle.net/s6jdem6L/

使用

删除所有默认列表样式

list-style:none;

然后将每个li设置为position:relative。然后将 child ul 设置为 display:absolute。这将使它如此使用 top，并且 left 将绝对定位元素相对于 li（因为它有 position:relative）。然后把它放在你想要的地方。然后，您可以使用 overflow:hidden 和 max-width 来隐藏 child ul。 （也有许多其他方法可以做到这一点）。然后使用 :hover 伪选择器在悬停 parent li.

时展开 child ul