<div class="demo-container">
<div class="demo">
  <h2>1. Statically-positioned scrollable wrapper (height: auto)</h2>
  
  <nav class="nav">
    <ul class="nav__wrap">
      <li class="nav__item">
        <div>Parent Link</div>
        <ul class="nav__dropdown">
          <li>Dropdown Link 1</li>
          <li>Dropdown Link 2</li>
          <li>Dropdown Link 3</li>
        </ul>
      </li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
    </ul>
  </nav>
  
  <p class="additional-content">Dropdowns are cut off.</p>
</div>

<div class="demo">
  <h2>2. Statically-positioned scrollable wrapper (height: 14em)</h2>
  
  <nav class="nav nav--tall">
    <ul class="nav__wrap">
      <li class="nav__item">
        <div>Parent Link</div>
        <ul class="nav__dropdown">
          <li>Dropdown Link 1</li>
          <li>Dropdown Link 2</li>
          <li>Dropdown Link 3</li>
        </ul>
      </li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
    </ul>
  </nav>
  
  <p class="additional-content">Subsequent content gets pushed down.</p>
</div>

<div class="demo">
  <h2>3. Absolutely-positioned scrollable wrapper (height: 14em)</h2>
  
  <nav class="nav nav--tall nav--absolute">
    <ul class="nav__wrap">
      <li class="nav__item">
        <div>Parent Link</div>
        <ul class="nav__dropdown">
          <li>Dropdown Link 1</li>
          <li>Dropdown Link 2</li>
          <li>Dropdown Link 3</li>
        </ul>
      </li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
    </ul>
  </nav>
  
  <p class="additional-content" style="margin-top: 5.5em">
    Subsequent content gets covered up and can't be interacted with.
  </p>
</div>

<div class="demo" style="min-height: 20em">
  <h2>4. Toggling height upon interaction</h2>
  
  <nav id="nav--4" class="nav nav--absolute"> <!-- toggle .nav--tall -->
    <ul class="nav__wrap">
      <li class="nav__item">
        <div>Parent Link</div>
        <ul class="nav__dropdown">
          <li>Dropdown Link 1</li>
          <li>Dropdown Link 2</li>
          <li>Dropdown Link 3</li>
        </ul>
      </li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
      <li class="nav__item"><div>Additional Link</div></li>
    </ul>
  </nav>
  
  <p class="additional-content" style="margin-top: 6em">
    Subsequent content only covered when necessary.
  </p>
</div>
</div>
.nav__wrap {
  display: flex;
  overflow-x: auto;
}
.nav__item {
  flex-shrink: 0;
  position: relative;
}
.nav__dropdown {
  position: absolute;
  z-index: 1;
}

// adding height for menus 2-4
.nav--tall .nav__wrap {
  height: 14em;
}
// adding position:absolute for menus 3-4
.nav--absolute {
  position: relative;
  .nav__wrap {
    position: absolute;
    width: 100%;
  }
}
// for toggle to work, mouse/touch needs to interact with wrapper as it leaves the menu (on all sides)
#nav--4 .nav__wrap {
  padding: .5em .5em 0;
}

/* Just for looks */
.nav__wrap, .nav__wrap * {
  list-style: none;
  background: rgba(50,50,200,.1);
}
ul {
  padding: 0; margin: 0;
}
.nav__item {
  height: 3em;
}
.nav__item > div, .nav__dropdown > li {
  white-space: nowrap;
  line-height: 3em;
  padding: 0 1em;
}
.nav__wrap *:hover {
  background: rgba(0,200,200,.3);
}
.demo-container {
  display: flex;
  flex-wrap: wrap;
}
.demo {
  flex-grow: 1;
  width: 300px;
  max-width: 450px;
  padding: 0 1em;
}
.one-half {
  width: 100%; 
  padding: 1em;
}
@media (min-width: 600px) {
  .one-half {
    width: calc(50% - 2em);
    float: left;
  }
}
.additional-content {
  padding: 1em;
  background: rgba(255,0,0,.4);
  &:hover {
    background: rgba(255,0,0,.6);
  }
}
View Compiled
var component = document.getElementById('nav--4');
var wrapper = component.children[0];

handle(activate, true);

function activate() 
{
  requestAnimationFrame(function () {
    component.classList.add('nav--tall');
    handle(deactivate, true);
  });
  handle(activate, false);
}

function deactivate(evt) 
{
  if (evt.target === wrapper) {
    component.classList.remove('nav--tall');
    handle(deactivate, false);
    handle(activate, true);
  }
}

function handle(callback, addOrRemove) 
{
  if (addOrRemove) {
    wrapper.addEventListener('touchstart', callback);
    wrapper.addEventListener('mouseover', callback);
  }
  else {
    wrapper.removeEventListener('touchstart', callback);
    wrapper.removeEventListener('mouseover', callback);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.