4

Why does adding overflow-x to the header cause the dropdown item to get "cut-off"?

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>

I need the overflow-x attribute as this dropdown will be included in a DIV which fills the gap between two floated DIVs.

I've searched SO and Googled most of the afternoon and am yet to find a solution. The desired result.

Community
  • 1
  • 1
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
  • 2,754
  • 1
  • 26
  • 39
  • 1
    since you're using `position:fixed;`, you can use `top:0;left:0;` and remove that overflow declaration altogether – jbutler483 May 01 '15 at 15:45

1 Answers1

2

If the element has overflow-x: hidden then overflow-y is set to auto or other trouble of this kind. See
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

You should try another way here.

Community
  • 1
  • 1
al.scvorets
  • 122
  • 9