なぜオレンジのドロップダウンの横に灰色のブロックがありますか？

Question

私は今2時間を探していて、それを理解することはできません。オレンジのドロップダウンブロックの横に灰色のブロックがあり、取り除くことはできません。私は多分それが行うには、CSSで行うことができると思うが、私は3ヶ月間codeedだけ私を助けているので、私はまだコーディングで良いではない。

.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> 

無効な構文は、多くの場合、ブラウザとして、このようなマークアップの問題を発生させることができますあなたのボタンが明示的にそれを知らせることなく「止まる」ときを知ることができません。