爲什麼在橙色下落旁邊有灰色塊？

Question

我一直在尋找2個小時，無法弄清楚，在我無法擺脫的橙色下拉塊旁邊有一個灰色塊。我也許認爲它可以和CSS一起工作，但是我的編碼還不夠好，因爲我只需要編寫3個月的代碼就可以幫助我。

.dropbtn { 
 
       background-color: orange; 
 
       color: white; 
 
       padding: 16px; 
 
       font-size: 16px; 
 
       border: none; 
 
       cursor: pointer; 
 
      } 
 

 
      .dropdown { 
 
       position: relative; 
 
       display: inline-block; 
 
      } 
 

 
      .dropdown-content { 
 
       display: none; 
 
       position: absolute; 
 
       background-color: #f9f9f9; 
 
       min-width: 160px; 
 
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
       z-index: 1; 
 
      } 
 

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

 
      .dropdown-content a:hover 
 
      {background-color: orange} 
 

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

 
      .dropdown:hover .dropbtn { 
 
       background-color: #000000; 
 
      }

<div class="dropdown" style="background-color: white"> 
 
      <button 
 
      class="dropbtn">name<button> 
 
      <div class="dropdown-content"> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
      </div> 
 
      </div>

Answer 1

你被你的按鈕（</button>）失蹤關閉標籤。嘗試一下下面的固定！

.dropbtn { 
 
       background-color: orange; 
 
       color: white; 
 
       padding: 16px; 
 
       font-size: 16px; 
 
       border: none; 
 
       cursor: pointer; 
 
      } 
 

 
      .dropdown { 
 
       position: relative; 
 
       display: inline-block; 
 
      } 
 

 
      .dropdown-content { 
 
       display: none; 
 
       position: absolute; 
 
       background-color: #f9f9f9; 
 
       min-width: 160px; 
 
       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
       z-index: 1; 
 
      } 
 

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

 
      .dropdown-content a:hover 
 
      {background-color: orange} 
 

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

 
      .dropdown:hover .dropbtn { 
 
       background-color: #000000; 
 
      }

<div class="dropdown" style="background-color: white"> 
 
      <button 
 
      class="dropbtn">name</button> 
 
      <div class="dropdown-content"> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
       <a href="#">name</a> 
 
      </div> 
 
      </div>

Answer 2

你缺少了之前的dropdown-content元素出現的按鈕關閉</button>標籤：

<!-- Ensure your button is closed PRIOR to the rest of your content --> 
<button class="dropbtn">name</button> 
<div class="dropdown-content"> 
    <a href="#">name</a> 
    <!-- Additional names omitted for brevity --> 
</div> 

無效的語法往往能產生這樣的瀏覽器標記問題如果沒有你明確地告訴它，你的按鈕將「停止」。