我有这个侧面板垂直导航,其中将鼠标悬停在菜单上时会显示子菜单。我的问题是子菜单和子菜单的子菜单由于 div 容器而没有显示。
由于 div 容器 [side-panel-links] 的宽度为 240px,因此将其截断。如果您扩展 div 容器的宽度,那么您将看到显示的子菜单。
我怎么可能让子菜单与 div 容器重叠以显示这些子菜单?
这是演示:http://jsfiddle.net/xkBZE/1/
这是一段 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>
谢谢!
最佳答案
首先,您不应该对所有内容都使用相同的 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;
}
虽然这可行,但仍需要更多样式才能获得与之前相同的外观。 希望这会有所帮助。
关于jquery - 垂直导航子菜单应该与 div 容器重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13110578/