将下拉菜单放入带有溢出自动的 div 时隐藏

Question

我在div容器内有一个下拉菜单overflow-x: auto，问题是每当我将溢出属性添加到容器以启用水平滚动时，您需要垂直滚动才能看到下拉菜单！！这不是我想要的，有没有解决方案使下拉菜单与其容器重叠并保持navbar在其容器内水平滚动的能力？

问题的GIF：

另一个没有溢出的GIF解决了问题，但禁用了容器中的水平滚动条

JSFIDDLE

我正在寻找纯 CSS 解决方案。

Answer 1

position: relative由于您的水平，使用纯 css 是不可能的nav ul li。

使用position: relative，子容器将始终以overflow: auto& 固定高度隐藏。

一个简单的 JavaScript 解决方案可能会有所帮助，它将用于菜单项的动态定位。

参考代码：

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>