php - 如何处理我的 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 并将 .dropdown-content 上的 position 更改为 绝对

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

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