overflow-x ruining my dropdown navbar - html

Question

My overflow-x: hidden; from the code ruins my dropdown bar.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
I think this should be fixable with an overflow-x: visible; somewhere but I can't find out where to make it work.
I also can't delete it or my website will do this:
When it should be like this:
I got a code snippet to show it (it's a lot of code but I don't know what code is usefull and what not so I put most of it on here)
* {
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">
Artikelen ▼
<div class="dropdown-content" id="myDropdown">
Displays
Manden
Signing
</div>
</li>
<li>Home
</li>
<li>Vision
</li>
<li>Clubrax
</li>
<li>Over ons
</li>
<li>Contact
</li>
</ul>
<br class="ClearLeft">
</nav>
</div>
<div class="block_for_scroll"></div>
first hover over and it works fine, then scroll down and hover over it and you see it goes wrong. Dont expand the snippet.
Update
picture for the answer of Jack Goodman
Header going over screen
Update
Explaining the fiddle
If your scrolled down:
Does this only happen by my fiddle?

Answer 1

change the "li.dropdown" css like this:
float: left;
width: 25%;

Answer 2

So I found the answer (finally) myself,
I removed the overflow-x from the body (which I did because I had the same problem as White space showing up on right side of page when background image should extend full length of page) and placed the overflow-x in article only (got my code splitted into header-article-footer) then the navbar still works and the code works just fine also on mobile devices.