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>

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

更新

杰克古德曼答案的图片

Header going over screen

更新

解释小提琴

如果向下滚动： 这只是我的小提琴吗？

Answer 1

更改“li.dropdown”css，如下所示：

float: left;
width: 25%;

Answer 2

所以我（最后）自己找到了答案，

我从body中删除了overflow-x（我之所以这样做，因为我遇到了与White space showing up on right side of page when background image should extend full length of page相同的问题）并且只在文章中放置了overflow-x（将我的代码拆分为header-article-footer）然后导航栏仍然有效，代码在移动设备上也能正常工作。