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

Question

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

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

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

这是演示：http://jsfiddle.net/xkBZE/1/

这是 HTML 代码的 sn-p：

    <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 所以 我把它改成了这样：

--> 更新的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;
}​​​​​​​​​​​​​​​

尽管这可行，但仍需要更多样式才能获得与以前相同的外观。 希望这会有所帮助。