CSS Vertical Scrollbar Padding Left/Right in Ul Possible

.dropdown {    width: 360px;    background-color: green;    padding-bottom: 10px;    max-height: 365px;    margin-bottom: 20px;}.itemContainer {    max-height: 355px;    overflow-y: auto;    padding-left: 10px;    padding-top: 10px;    margin-right: 10px;}.itemContainer>div {    display: table;    width: 100%;}.item {    display: table-row;}.item>div{    display: table-cell;    vertical-align: top;    padding-bottom: 10px;}.item:last-child>div {    padding-bottom: 0;}.item > div:nth-child(1) {    width: 100%;}.item>div:nth-child(1)>div{    background-color: white;    padding: 10px;    height: 51px;}.item:nth-child(5) > div:nth-child(2) > div {    width: 10px;}@media screen {    .itemContainer::-webkit-scrollbar {        width: 6px;        border-radius: 2px;    }    .itemContainer::-webkit-scrollbar-thumb {        border-radius: 2px;        background-color: black;        border: solid red 10px;    }    .itemContainer::-webkit-scrollbar-track {        margin-top: 10px;        background-color: yellow;        width: 6px;    }}

  <div class="dropdown">    <div class="itemContainer"><div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>    </div></div>  </div>
  <div class="dropdown">    <div class="itemContainer"><div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>      <div class="item"><div><div>thing</div></div><div><div></div></div></div>    </div></div>  </div>

Adding scroll bar to dynamic ul li

I've made a couple of adjustments to your original stylesheet, and now it will show the scroll bar, but only when it exceeds the height of 3 list items (63 pixels in this case). Here's the final CSS code:

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

Here's the demo of it. I've also, for demonstration purposes, inserted 2 extra <li> elements to the Home and SQL Server vs Oracle items. The Home item will show how the popup behaves if there are fewer than 3 list items there.

To explain each of the changed bits, first the code that actually does the trick:

• defining the max-height to 63 will make the ul behave normally if it stays under 63px high, but if it exceeds that, it will overflow and show a scroll bar. If you want to show more items, just increase the max-height to the desired height. Currently the height of each item is 21px, so I used that to get the 63px for 3 items.
• Since the overflow should only show a scroll bar for the vertical direction, only overflow-y:auto; should be there, and overflow-x:hidden to prevent a scrollbar in the horizontal direction.

And then the other general changes I made:

• I've added 20px margin between items (10px on either side of the element) to make the list look a bit better here. You may want to apply your own style though, this is just for this demo.
• I've changed your hiding technique from 'shoving it off to -999em to the left' to hiding it via display:none. This is better to work with, since elements that are display:none will not render in search engines, so this will help in those situations. In general I think hiding things with display:none is just better than shoving it off the screen, while it's still actually there
• I've removed the padding to the left of the ul since it just looked quite bad. No need for the default padding if you're not using it for a dotted/numbered list.

This should also work considering your comment to Zachary Carter's answer, since this won't show a huge white box if you define the max-height to 210px (10 items).

Unexpected padding or white space at bottom of page causing unnecessary vertical scroll?

The following elements have height:100%:

• html
• body
• photoFrameContainer

Margins and padding are not calculated within the height, so 100% + margin + padding is what you see. Here is what the spec says:

For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

Since the calculated height is greater than the height of the viewport, and the default stylesheet defines overflow:visible as the default for all elements, the scrollbar is shown.

References

• Visual Formatting Model Details: Absolutely Positioned, non-replaced elements

• CSS 2.1: Overflow

• CSS Dimensions

How to Add Padding to Vertical Dropdown without Messing up Dropdown?

@Grace Sawyer, it's an issue of specificity. When you implement your code ul li { padding 10px; } that styling is being inherited by the list-items in your sub-menu. One way of overcoming this is to add selecting those submenu list-items and setting their styling directly. This way it overrides the inherited styling. If you need a refresher or are new to CSS, this is a good article that I always refer back to for referencing specificity.

If you add these lines of code to your CSS, you'll get your desired results

nav ul li { padding: 15px; }

nav ul li ul li { padding: 0px;}

I also forked your jsfiddle and implemented the code, so you can see it in action here.

Related Topics