将滚动条添加到动态ul li

我搜索了很多帖子和论坛,因为我认为这可能是一个基本的东西,但没有找到它所以问这里,我想要做的是添加滚动条,如果高度超过一定的限制,让我们说如果菜单项超过3.

我创建了一个jsfiddle http://jsfiddle.net/euSWB/

如果您无法访问它,那么这里是HTML和CSS HTML

Home

SQL Server vs Oracle
 


Basic SQL : Declare variables and assign values

Basic SQL : Inner Join, Outer Join and Cross Join

Basic SQL : Padding and Trimming

Basic SQL : Union,Except/Minus,Intersect

Update from Select




SSIS
 

Coalesce in SSIS
Universal CSV Generator
Parsing a row into multiple in CSV


XML Task in SSIS

 

CSS

#mnav {
margin-left: -30px;
margin-right: -30px;
}
#mnav li {
float: left;
list-style: none;
}
#mnav li a, #mnav li a:link, #mnav li a:visited {
text-decoration: none;
}
#mnav li a:hover, #mnav li a:active {
text-decoration: none;
}
#mnav li:hover, #mnav li.sfhover {
position: static;
}
#mnav li ul {
display: block;
z-index: 9999;
position: absolute;
left: -999em;
width: 400px;
margin: 0px;
border: 1px solid #ddd;
}
#mnav li:hover ul, #mnav li.sfhover ul {
left: auto;
}
#mnav li ul li a, #mnav li ul li a:link, #mnav li ul li a:visited {
display: block;
margin: 0;
text-decoration: none;
z-index: 9999;
border-bottom: 1px dotted #ccc;
width: 500px;
}
#mnav li ul li a:hover, #mnav li ul li a:active {
display: block;
margin: 0;
text-decoration: none;
}

Joeytje50.. 16

我对原始样式表进行了一些调整,现在它将显示滚动条,但仅当它超过3个列表项的高度时(在这种情况下为63像素).这是最终的CSS代码:

#mnav {
    margin-left: -30px;
    margin-right: -30px;
}
#mnav li {
    float: left;
    list-style: none;
    margin:0 10px;/*Keeping 10px space between each nav element*/
}
#mnav li a,/*These can all be merged into a single style*/
#mnav li a:link,
#mnav li a:visited,
#mnav li a:hover,
#mnav li a:active {
    text-decoration: none;
}
#mnav li ul {
    display: none;/*This is the default state.*/
    z-index: 9999;
    position: absolute;
    width: 400px;
    max-height:63px;/*The important part*/
    overflow-y:auto;/*Also...*/
    overflow-x:hidden;/*And the end of the important part*/
    margin: 0px;
    padding-left:5px;/*Removing the large whitespace to the left of list items*/
    border: 1px solid #ddd;
}
#mnav li:hover ul, #mnav li.sfhover ul {
    display:block;/*This is the hovered state*/
}
#mnav li ul li a, #mnav li ul li a:link, #mnav li ul li a:visited {
    display: block;
    margin: 0;
    text-decoration: none;
    z-index: 9999;
    border-bottom: 1px dotted #ccc;
    width:400px;
}
#mnav li ul li a:hover, #mnav li ul li a:active {
    display: block;
    margin: 0;
    text-decoration: none;
}

这是它的演示.出于演示目的,我还将2个额外