overflow-xドロップダウンnavbar

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

---

の答えのための

---

更新

絵更新

01あなたの下にスクロールした場合フィドル

を説明する

： これは私のバイオリンで発生しますか？このような

Answer 1

だから、私は身体から溢れ-Xを削除答え（最後に）私自身、

を見つけました（私が理由でした私はWhite space showing up on right side of page when background image should extend full length of pageと同じ問題を抱えていました）、オーバーフローxを記事にのみ配置しました（私のコードをヘッダ記事フッタに分割しています）。そしてnavbarはまだ動作し、コードはモバイルデバイスでもうまく機能します。

Answer 2

変更 "li.dropdown" のCSSを：

float: left; 
width: 25%;