Drop Down menu hidden when put inside div with overflow auto

Question

I have a dropdown menu inside a div container with overflow-x: auto, the problem that whenever I add the overflow property to the container to enable the horizontal scrolling you need to scroll vertically to see the dropped menu !!which is not what I want, is there a solution to make the dropdown menu overlap it's container with keeping the ability to scroll the navbar horizontally inside it's container ?

GIF of the Issue :

Another GIF without overflow which solve the problem but disable the horizontal scroll bar in the container

JSFIDDLE

I'm looking for a pure CSS solution.

Answer 1

This is not possible using pure css because of the position: relative at your nav ul li level.

With the position: relative, the child container will always be hidden with an overflow: auto & fixed height.

A simple javascript solution can be helpful that will work on the dynamic positioning of the menu items.

Refer code:

function scrollLeft() {
  $(".wrapit").css("left", function() {
    return $(this).parent().position().left;
  });
}

$(".container").scroll(function() {
  scrollLeft();
});

scrollLeft();

nav ul {
  background: #ddd;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

.container {
  width: 500px;
  height: 67px;
  background-color: #ffffff;
  overflow-x: auto;
}

.cf {
  white-space: nowrap;
}

.wrapit {
  white-space: normal;
}

nav li {
  display: inline-block;
  margin: 0;
  padding: 0;
  /* position: relative; */
  min-width: 33%;
}

nav a {
  background: #ddd;
  color: #444;
  display: block;
  font: bold 16px/50px sans-serif;
  padding: 0 25px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

nav .dropdown:after {
  content: ' \25bc';
}

nav li:hover a {
  background: #ccc;
}

nav li ul {
  left: 0;
  opacity: 0;
  position: absolute;
  width: 165px;
  top: 35px;
  visibility: hidden;
  z-index: 1;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

nav li:hover ul {
  opacity: 1;
  top: 50px;
  visibility: visible;
}

nav li ul li {
  width: 100%;
}

nav li ul a:hover {
  background: #bbb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <nav>
    <ul class="cf">
      <li><a href="#">Menu Item 1</a></li>
      <li><a class="dropdown" href="#">Menu Item 2</a>
        <ul class="wrapit">
          <li><a href="#">Sub-menu Item 1</a></li>
          <li><a href="#">Sub-menu Item 2</a></li>
          <li><a href="#">Sub-menu Item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Menu Item 3</a></li>
      <li><a href="#">Menu Item 3</a></li>
      <li><a href="#">Menu Item 3</a></li>
    </ul>
  </nav>
</div>