调整大小下拉菜单

Question

我正在尝试调整下拉菜单的大小，其中有文本+图片。但是边框使菜单的一部分变得更大，这就是问题所在。我需要有文字，在文字下方是产品图片。有没有办法通过css做到这一点？

HTML

  <div class="wrap">
    <div class="header">
      <img src="./images.png" class="image" alt="logo" />
      <div class="dropdown">
        <button class="dropbtn">Menu</button>
        <div class="dropdown-content">
          <a href="#">Roofs<img src="https://insta-galery.w3spaces.com/strecha.jpg"/></a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
  </div>
</body>

CSS

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  margin-top: 1px;
  font-size: 16px;
  border: none;
}

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

.image{
  display: flex;
}

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

.dropdown-content a {
  color: black;
  padding: 1px 1px;
  text-decoration: none;
  display: block;
  border-radius: 10px;
}

.dropdown-content a:hover {background-color: #ddd;}

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

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

Answer 1

我改变了这个：

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

display: flex 到 block。它解决了我的问题。