当置于具有溢出自动的div内时隐藏下拉菜单

Question

我在div容器中有overflow-x: auto的下拉菜单，问题是每当我将overflow属性添加到容器以启用水平滚动时，您需要垂直滚动以查看删除的菜单!!这不是我想要的，是否有一个解决方案让下拉菜单重叠它的容器，同时保持在其容器内水平滚动navbar的能力？

问题的GIF：

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

JSFIDDLE

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

Answer 1

由于position: relative级nav ul li，因此无法使用纯CSS。

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

一个简单的JavaScript解决方案可能会对菜单项的动态定位起作用。

参考代码：

＆＃13;

＆＃13;

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

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

scrollLeft();

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;