将滚动条添加到动态ul li

Question

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

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

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

<ul id="mnav">

<li><a><b>Home</b></a>
</li>
<li><a><b>SQL Server vs Oracle</b></a>
 <ul>

<li><a>Basic SQL : Declare variables and assign values</a></li>

<li><a>Basic SQL : Inner Join, Outer Join and Cross Join</a></li>

<li><a>Basic SQL : Padding and Trimming</a></li>

<li><a>Basic SQL : Union,Except/Minus,Intersect</a></li>

<li><a style="border-bottom-color: currentColor; border-bottom-width: 0px; border-bottom-style: none;">Update from Select</a></li>

</ul>
</li>

<li><a href="#"><b>SSIS</b></a>
 <ul>
<li><a>Coalesce in SSIS</a></li>
<li><a >Universal CSV Generator</a></li>
<li><a >Parsing a row into multiple in CSV</a></li>


<li><a style="border-bottom-color: currentColor; border-bottom-width: 0px; border-bottom-style: none;" >XML Task in SSIS</a></li>
</ul>
 </li></ul>

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;
}

Answer 1

我对原始样式表进行了一些调整，现在它将显示滚动条，但仅当它超过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;
}

这是它的演示 。 出于演示目的，我还在Home和SQL Server与Oracle项目中插入了2个额外的<li>元素。 如果列表项少于3个， Home项将显示弹出窗口的行为方式。

要解释每个更改的位，首先是实际执行操作的代码：

• 将max-height定义为63将使ul在低于63px的情况下表现正常，但如果超过该值，则会溢出并显示滚动条。 如果要显示更多项目，只需将max-height增加到所需高度即可。 目前每件商品的高度为21px，所以我用它来获得3件商品的63px。
• 由于溢出应该只显示垂直方向的滚动条，只有overflow-y:auto; 应该在那里，并overflow-x:hidden以防止水平方向的滚动条。

然后是我做出的其他一般性改变：

• 我在项目之间添加了20px的边距（元素两边各10px），使列表在这里看起来更好一些。 您可能想要应用自己的风格，这仅适用于此演示。
• 我已经将你的隐藏技术改为“把它推到-999em到左边”，通过display:none来隐藏它。 这样做更好，因为display:none元素display:none将不会在搜索引擎中呈现，因此这将有助于这些情况。 一般来说，我认为用display:none隐藏东西display:none只是比把它推出屏幕更好，而它实际上仍然存在
• 我删除了ul左边的填充，因为它看起来很糟糕。 如果您没有将它用于虚线/编号列表，则无需默认填充。

考虑到你对Zachary Carter的答案的评论，这也应该有效，因为如果你将max-height定义为210px（10项），这将不会显示一个巨大的白盒子。

Answer 2

如果您有可预测的列表项高度，这是相当微不足道的。 请考虑以下示例：

<ul class="sub-menu">
    <li>This is option one.</li>
    <li>This is a second option.</li>
    <li>We'll need three.</li>
    <li>And now these are out of view.</li>
    <li>I'm the last option.</li>
</ul>

这里我们列出了五个项目。 我将指示每个列表项本身的font-size和line-height为1em ，顶部和底部的填充为.25em ：

.sub-menu li {
    font-size: 1em;
    padding: .25em 1em;
    line-height: 1em;
}

所以现在我们知道每个列表项都是1.5em高。 因此，我们现在可以在父元素上设置max-height ，使其一次只显示三个列表项：

.sub-menu {
    padding: 0;
    max-height: 4.5em; /* 1.5 x 3 */
    overflow-y: auto;
}

结果：

在线演示： http ： //jsfiddle.net/euSWB/16/

Answer 3

几件事......

首先，您没有为无序列表指定高度。 如果没有为元素定义高度，则永远不会看到滚动条。 元素将根据其内容调整其大小。

此外，如果要防止UL的内容水平溢出元素，请将overflow-x CSS3属性设置为hidden。

我认为你需要的是：

#mnav li ul {
    display: block;
    z-index: 9999;
    position: absolute;
    left: -999em;
    width: 400px;
    margin: 0px;
    border: 1px solid #ddd;
    overflow-x:hidden;
    height:50px;
}

http://jsfiddle.net/euSWB/9/

希望这可以帮助！