html - overflow-x 破坏了我的下拉导航栏

Question

代码中的 overflow-x: hidden; 破坏了我的下拉栏。

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

我认为这应该可以通过在某处使用 overflow-x: visible; 来解决，但我找不到让它工作的地方。

我也不能删除它，否则我的网站会这样做:

什么时候应该是这样的:

我有一个代码片段来展示它(它有很多代码，但我不知道哪些代码有用，哪些没有用，所以我把大部分代码放在这里)

* {
margin: 0;
padding: 0;
border: 0;
}

html, body {
width: 100%;
height: 100%;
overflow-x: hidden;  //The problem
}

.navbar ul {
list-style-type: none;
border-radius: 5px 0 5px 5px;
overflow: hidden;
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #d8d7d3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #d8d7d3 100%);
height: 45px;
-moz-border-radius: 5px 0 5px 5px;
-webkit-border-radius: 5px 0 5px 5px;
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
box-shadow: 0 -2px 2px rgba(105, 105, 105, 0.12) inset;
}

.navbar li {
float: left;
max-width: 1200px;
width: 15%;
}

.navbar li a {
display: block;
color: #000000;
text-align: center;
padding: 14px 2em;
text-decoration: none;
border-right: 1px solid #c8c8c8;
}

.navbar li a.active {
color: #eb800e;
background-color: rgba(255, 255, 255, 0.2);
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
}

.navbar li .dropdown-content a {
padding: 14px 0;
}

.navbar li a:hover {
color: #eb670c;
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
background-color: rgba(255, 255, 255, 0.2);
}

li .dropdown-content a:hover {
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #d8d7d3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #d8d7d3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #d8d7d3 100%);
border-right: 1px solid #CBCACA;
border-top: 1px solid #CBCACA;
}

.dropdown:hover .dropdown-content {
display: block;
}

li.dropdown {
display: inline-block;
width: 165px;
}

.dropdown-content {
display: none;
position: absolute;
background: #EEEEEE;
background: -moz-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,     #f5f5f5), color-stop(100%, #e8e7e3));
background: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -o-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: -ms-linear-gradient(top, #f5f5f5 0%, #e8e7e3 100%);
background: linear-gradient(to bottom, #f5f5f5 0%, #e8e7e3 100%);
border-right: 1px solid #CBCACA;
width: 165px;
margin-top: -3px;
}

.dropdown-content a {
color: black;
padding: 12px 0;
text-decoration: none;
display: block;
text-align: center;
white-space: nowrap;
}

.dropdown-content a:hover {
background-color: #f1f1f1
}

.block_for_scroll{
height: 85%;
}

<div class="navbar">
  <nav>
    <ul>
      <li class="dropdown">
        <a href="Assortiment_erdeasy.html">Artikelen&nbsp;&nbsp;▼</a>
        <div class="dropdown-content" id="myDropdown">
          <a href="Groep1.html">Displays</a>
          <a href="Groep2.html">Manden</a>
          <a href="Groep3.html">Signing</a>
        </div>
      </li>
      <li><a href="Home_Dutch.html" class="active">Home</a>
      </li>
      <li><a href="Vision_Dutch.html">Vision</a>
      </li>
      <li><a href="Clubrax_Dutch.html">Clubrax</a>
      </li>
      <li><a href="Over_ons_Dutch.html">Over ons</a>
      </li>
      <li><a href="Contact_Dutch.html">Contact</a>
      </li>
    </ul>
    <br class="ClearLeft">
  </nav>
</div>
<div class="block_for_scroll"></div>

首先将鼠标悬停在上面，它工作正常，然后向下滚动并悬停在它上面，您会发现它出错了。不要展开代码段。

---

更新

图为Jack Goodman的答案

Header going over screen

---

更新

解释 fiddle

如果您向下滚动: 这只会发生在我的 fiddle 上吗？

Answer 1

像这样更改“li.dropdown”CSS:

float: left;
width: 25%;