html - 为什么橙色下拉菜单旁边有一个灰色块？

我一直在寻找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>

最佳答案

您在按钮（</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>