溢出-x：隐藏的“截止”下拉菜单[重复]答案

【问题标题】：overflow-x:hidden "cuts-off" dropdown [duplicate]溢出-x：隐藏的“截止”下拉菜单[重复]
【发布时间】：2015-05-01 15:35:27
【问题描述】：

为什么将overflow-x 添加到header 会导致下拉项“被截断”？

header {
  position: fixed;
  width: 100%;
  background-color: #336699;
  overflow-x: hidden;
}
header li {
  display: inline-block;
  position: relative;
}
header li:hover .previewImg {
  display: block;
}
header .previewImg {
  position: absolute;
  display: none;
}
header a {
  display: block;
  padding: 10px;
  background-color: #ccc;
}
.previewImg {
  height: 100px;
  width: 75px;
  background: orange;
  z-index: 999;
}

<header>
  <ul>
    <li>
      <a href="#">Menu Option</a>
      <div class="previewImg">Preview Image Here</div>
    </li>
    <li>
      <a href="#">Menu Option</a>
      <div class="previewImg">Preview Image Here</div>
    </li>
  </ul>
</header>

我需要 overflow-x 属性，因为此下拉列表将包含在 fills the gap between two floated DIVs 的 DIV 中。

我在下午的大部分时间都在搜索 SO 和谷歌，但还没有找到解决方案。 The desired result.

【问题讨论】：

由于您使用的是position:fixed;，因此您可以使用top:0;left:0; 并完全删除该溢出声明

标签： html css hover overflow

【解决方案1】：

如果元素有overflow-x: hidden 则overflow-y 设置为auto 或其他此类问题。见
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

您应该在这里尝试另一种方式。

【讨论】：