overflow-x: скрытый «отсечки» выпадающего списка

Question

Почему добавление 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 как это выпадающий будут включены в DIV какой fills the gap between two floated DIVs.

Я искал SO и Googled большую часть дня, и я еще не нашел решение. The desired result.

Answer 1

Если элемент имеет overflow-x: hidden, то overflow-y установлен в auto или другие проблемы такого рода. См.
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Вы должны попробовать другой путь здесь.