如何从 img 表格中的链接下拉列表中删除下划线？

Question

我已经尝试使用 text-decoration:none 来删除下划线，但我无法让它自行删除。

这是我的 HTML...

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

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

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

.dropdown-content a:hover {
  background-color: #f1f1f1;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
  text-decoration: none;
}

.dropdown:hover .dropimg {
  background-color: #3e8e41;
  text-decoration: none;
}

img.dropimg {
  text-decoration: none;
}

td.table_data.dropdown .image-link {
  text-decoration: none;
}

a:link {
  text-decoration: none!important;
}

a:hover {
  text-decoration: none;
  box-shadow: none;
}

td.table_data.dropdown a.image-link {
  text-decoration: none!important;
}

<td class="table_data dropdown">
  <a class="image-link" href="/somelink"><img class="dropimg" src="img/address_book.png" alt="contact" height="25px" width="25px">
    <div class="dropdown-content">
      <a href="#">Name: Blah</a>
      <a href="#">DoB: Blah2</a>
    </div>
  </a>
</td>

也许我的 CSS 不够具体，但我不知道从哪里开始。自然，我希望它可以在大多数现代浏览器上运行。我们通常在部署此站点的内部使用 IE、Edge、Firefox 和 Chrome。

任何建议将不胜感激；谢谢。

Answer 1

将文本装饰设置为 a 标签本身。

 a{text-decoration: none;}

您不想嵌套标签，请使用 li 或按钮作为下拉菜单。

Answer 2

这个解决方案对我有用：

<td class="table_data">
    <a style="text-decoration:none;"
       title="Name: blah1&#10DoB: Blah2&#10"
       href="/some-link/">
        <img class="dropimg" src="{% static "img/address_book.png" %}" alt="contact" height="20px" width="20px">
    </a>
</td>