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。然后将孩子ul设置为display:absolute。这样就可以使用top，而left绝对会将元素相对于li定位（因为它有position:relative）。然后把它放在你想要的地方。然后，您可以使用overflow:hidden和max-width隐藏孩子ul。（还有很多其他方法可以做到这一点）。然后使用:hover伪选择器在父ul悬停时展开子li。

jquery css垂直下拉菜单，包含来自无序列表的子级别

1 个答案: