使用溢出自动放入 div 时隐藏下拉菜单

Question

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

问题的 GIF ：

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

JSFIDDLE

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

Answer 1

由于position: relative 位于您的nav ul li 级别，因此使用纯css 是不可能的。

使用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>