私のCSSのドロップダウンメニューのギャップとは何ですか？

Question

私はひどく私のCSSのコーディングに助けが必要です。初心者はここに。

#accountTitle 
padding: 0; 
display: block; 
margin-top: 90px; 
margin-bottom: -120px; 
margin-left: 50px; 
font-size: 36px; 


a:active 
background-color: #a6d8a8; 




table 
margin-left: auto; 
margin-right: auto; 
width: 100%; 
margin-top: 50px; 
overflow-x:auto; 


td 
    text-align:left; 

    th, td 

padding: 15px; 



th 
    background-color: #4CAF50; 
    color: white; 
    text-align: center; 



tr:hover 
background-color: #a6d8a8; 
cursor: pointer; 




#container 
margin-top: 135px; 
position: relative; 
padding: 0; 
overflow: hidden; 
background-color: #333; 
border-radius: 10px; 
width: 100%; 




.wrap 
margin-right: 10px; 
text-align: center; 



.dropbtn 

background-color: #333; 
color: white; 
padding: 16px; 
font-size: 16px; 
border: none; 
cursor: pointer; 



.dropdown 
position: relative; 
display: inline-block; 
margin-right: 5px; 



    .dropdown-content 

    display: none; 
    position: fixed; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 2; 


    .dropdown-content a 
     color: black; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
     text-align: left; 


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

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



      .dropdown:hover .dropbtn 
      background-color: #434343; 



<label id="accountTitle">Audit Log</label> 
<div id="container"> 
<div class="wrap"> 
<div class="dropdown"> 
<button class="dropbtn" id="homebtn">Home</button> 
<div class="dropdown-content"> 
<a href="#">Main Page</a> 
<a href="#">Accounts</a> 
<a href="#">Audit Log</a> 
<a href="#">Logout</a> 
</div> 
</div> 

ここでの問題は、私は、これは

をたまたまスクロールダウンしたときに私は本当にこれを完了する必要があるしてください、ということです。

Answer 1

は）ない#containerのうち、overflowを取り、absolute

#container { 
    ... 
    padding: 0; 
    /* overflow: hidden; DELETE THIS */ 
    background-color: #333; 
    ... 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    ... 
} 

Answer 2

.dropdown-content aのパディングを削減し、この

.dropdown-content a 
{ 
     color: black; 
     padding: 0px 16px; 
     text-decoration: none; 
     display: block; 
     text-align: left; 
} 

Answer 3

ようにする必要があり、私は非常によく、問題を理解していないが、問題は、ドロップダウンがまったく表示されないということであるならば、あなたはこのようなあなたの.dropdown:hover .dropdown-contentを変更する必要があります。

.dropdown:hover .dropdown-content{ 
     display: block; 
     z-index: 1; 
} 

z-インデックス変更htmlレンダリング優先度が高いほど優先度が高くなります。