Drop Down menu hidden when put inside div with overflow auto - html

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>Menu Item 1</li>
<li><a class="dropdown" href="#">Menu Item 2</a>
<ul class="wrapit">
<li>Sub-menu Item 1</li>
<li>Sub-menu Item 2</li>
<li>Sub-menu Item 3</li>
</ul>
</li>
<li>Menu Item 3</li>
<li>Menu Item 3</li>
<li>Menu Item 3</li>
</ul>
</nav>
</div>