Question

我有这个侧面板垂直导航，其中子菜单在菜单上悬停时显示。我的问题是由于div容器，子菜单和子菜单的子菜单没有显示。

由于div容器[side-panel-links]的宽度为240px，因此将其切断。如果扩展div容器的宽度，则会看到正在显示的子菜单。

我怎么可能让子菜单重叠div容器来显示这些子菜单？

以下是HTML代码片段：

    <div class="side-panel-links left">
    <div class="side-panel-links-scroll">
        <div id="myslidemenu" class="jqueryslidemenu">
            <ul id="side-panel-list">
                <li>
                    <a href="#">Test 1</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
                <li>
                    <a href="#">Test 2</a>
                    <ul class="side-panel-list-child">
                        <li>Test 2-1
                            <ul class="side-panel-list-child">
                                <li>Test 2-1-1
                                    <ul class="side-panel-list-child">
                                        <li>Test 2-1-1-1
                                            <ul class="side-panel-list-child"></ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>Test 2-1-2
                                    <ul class="side-panel-list-child"></ul>
                                </li>
                            </ul>
                        </li>
                        <li>Test 2-2
                            <ul class="side-panel-list-child">
                                <li>Test 2-2-1
                                    <ul class="side-panel-list-child"></ul>
                                </li>
                            </ul>
                        </li>
                        <li>Test 2-3
                            <ul class="side-panel-list-child">
                                <li>Test 2-3-1
                                    <ul class="side-panel-list-child">
                                        <li>Test 2-3-1-1
                                            <ul class="side-panel-list-child"></ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Test 3</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
                <li>
                    <a href="#">Test 4</a>
                    <ul class="side-panel-list-child"></ul>
                </li>
            </ul>
        </div>
    </div>
</div>

谢谢！

Answer 1

首先，你不应该为所有内容使用相同的id，这就是所用的类。为了展示开箱即可，我会在该元素上使用position: absolute;z-index:100;，在这种情况下<ul>嵌套在<li>。

希望这有帮助

我无法将头围绕在你的css上我改成了这个：

- ＆GT; 更新了css

.side-panel-links{
width: 240px;
background-color: #272727;
padding-top: 25px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif ;
}
.jqueryslidemenu ul li ul{
left: 0;
display: block;
visibility: hidden;
}
#side-panel-list{
list-style-type: none;
margin: 0;
padding: 0;
}
#side-panel-list li {
border-top: 1px solid #353535;
border-bottom: 1px solid #191919;
padding: 10px 0 10px 20px;
margin: 0;
}
#side-panel-list li ul{
position: absolute;
left: 300px;
display: list-item;
}
#side-panel-list li a {
color: #EEE;
margin: 0 50px 0 0;
width: 161px;
display: list-item;
color: white;
padding: 8px 8px;
border-right: 1px solid #CCCCCC;
text-decoration: none;
}
#side-panel-list li ul li{
padding: 5px;
display: block;
background-color: red;
}
#side-panel-list li a:link,
#side-panel-list li a:visited {
color: white;
}
#side-panel-list li a:hover{
background: black;
color: #426BA4;
}

尽管如此，它仍然需要更多样式才能获得与之前相同的外观。希望这会有所帮助。

垂直导航子菜单应与div容器重叠

1 个答案: