<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.