我有一个很长的垂直菜单,显示悬停的子菜单。 我想在我的页面上固定菜单和100%高度,并使用滚动条滚动菜单项。 我将使用jquery slimScroll来显示需要父容器溢出的滚动条:隐藏。
问题是,如果子容器有溢出,则子菜单不会显示在父容器上:隐藏。 Html代码:
<div class="scrollable">
<ul class="menu">
<li>Menu
<ul class="submenu">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Menu
<ul class="submenu">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Menu
<ul class="submenu">
<li>Submenu</li>
</ul>
</li>
<li>Menu
<ul class="submenu">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Menu
<ul class="submenu">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>
CSS代码:
/* this needs to have a fixed position */
.scrollable {
/* If i remove the fixed position the ul's will go outside */
position: fixed;
top: 0;
left: 0;
overflow: hidden;
/*
overflow-y: scroll;
overflow-x: hidden;
overflow-x: visible;
*/
width: 100px;
height: 100px;
border: 1px solid #ff0000;
padding: 10px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
position: absolute;
}
li {
width: 100px;
background-color: #dddddd;
line-height: 50px;
height: 50px;
border-bottom: 1px solid #fff;
display: block;
/* even if I set position to absolute, which messes the design, the submenu wont show outside */
/* position: absolute; */
}
.submenu {
display:none;
margin: -45px 0 0 70px;
border: 1px solid #000;
position: absolute;
z-index: 100;
}
.menu li:hover .submenu {
display: block;
}
我在这里有一个条纹html和css的例子jsfiddle。
有没有办法在容器上显示子菜单溢出:隐藏?
答案 0 :(得分:0)
请检查 link ,并告诉我这就是您要找的内容。
<强> CSS 强>
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.scrollable {
position: fxied;
top: 0;
left: 0;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid #ff0000;
padding: 10px;
}
ul.menu > li {
color: #ff0000;
}
li {
background-color: #dddddd;
line-height: 50px;
height: 50px;
border-bottom: 1px solid #fff;
display: block;
}
.submenu {
width: 200px;
display:none;
margin: -45px 0 0 70px;
border: 1px solid #000;
position: absolute;
z-index: 100;
}
.menu li:hover .submenu {
display: block;
}