On my website, I have a collection of buttons displayed as a list using inline-block. Some of these buttons include div elements with additional content that is positioned absolutely below the parent li element. The list is contained within a div with overflow-x: auto to account for any unknown number of buttons. However, this setting inadvertently creates a vertical scroll bar that I am trying to avoid, and I'm puzzled as to why it's appearing despite absolute positioning removing elements from the document flow. Here's an excerpt of the code:
#links, #content {
width: 100%;
position: relative;
}
#links {
z-index: 1;
overflow-x: auto;
white-space: nowrap; }
#links li {
display: inline-block;
width: 100px;
height: 40px;
background: brown;
text-align: center;
color: #fff;
position: relative;
}
#links .link-content {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: #66f;
}
#content {
z-index: 0;
background: #ccc;
height: 100px;
}<div id="links">
<ul>
<li>Link 1<div class="link-content">Link Content</div>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="content">
</div>This is the desired outcome where I removed 'overflow-x: auto' from '#links ul', but still need it in case more buttons exceed the available space:
#links, #content {
width: 100%;
position: relative;
}
#links {
z-index: 1;
/*overflow-x: auto;*/
white-space: nowrap; }
#links li {
display: inline-block;
width: 100px;
height: 40px;
background: brown;
text-align: center;
color: #fff;
position: relative;
}
#links .link-content {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: #66f;
}
#content {
z-index: 0;
background: #ccc;
height: 100px;
}<div id="links">
<ul>
<li>Link 1<div class="link-content">Link Content</div>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="content">
</div>To achieve my goal, I plan to utilize JavaScript to toggle the visibility of '.link-content' upon button clicks. Thank you.