<div class="menu-line">
<div class="menu-line__content">
<ul class="menu-line__items">
<li class="menu-line__item">lorem</li>
<li class="menu-line__item">lorem</li>
<li class="menu-line__item">lorem</li>
<li class="menu-line__item">lorem</li>
<li class="menu-line__item">lorem</li>
<li class="menu-line__item">lorem</li>
<li class="menu-line__item">lorem</li>
</ul>
</div>
</div>
* {
box-sizing: border-box;
}
.menu-line {
max-width: 500px;
&__content {
position: relative;
z-index: 2;
overflow: hidden;
}
&__items {
white-space: nowrap;
user-select: none;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
background-color: hsl(0, 0%, 90%);
border-bottom: 5px solid hsl(130, 50%, 40%);
}
&__item {
list-style: none;
padding: 20px 50px;
&:not(:last-child) {
border-right: 1px solid hsl(0, 0%, 100%);
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.