html - 为什么文本修饰在我的代码中不起作用？

Question

我的代码中的“列表项 2”在下拉超链接中没有带下划线的超链接，直到我将鼠标悬停在它上面。这就是我的期望和希望它能做到的。

问题是，当我尝试向下 zipper 接添加多个超链接(如“列表项 1”所示)时，在将鼠标悬停在超链接上方之前，两个超链接都会带有下划线。

我必须将“列表项 1”的链接 1 和 2 放入 a 内，因为如果没有它，链接 1 和 2 就会相互重叠。如果我添加 <br>当它们重叠时，这也会通过向下推“列表项 2”来影响它。

要明确的是，我希望“列表项 1”和“列表项 2”位于同一级别，并且所有链接在将鼠标悬停在它们上方之前都不会带有下划线。

我在网上搜索过，“text-decoration: none”的问题似乎很常见，但我找不到任何解决我的特定问题的方法。

在我的示例中，我将 href 属性留空，因为它们链接到的内容在这里并不重要。

ul {
  list-style-type: none;
}

a:hover {
  text-decoration: underline;
}

.dropdown {
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
  text-decoration: none;
}

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

<ul>
  <div class="dropdown">
    <li>list item 1</li>
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a><br>
      <a href="" target="_blank">link 2</a>
    </div>
  </div>

  <div class="dropdown">
    <li>list item 2</li>
    <a class="dropdown-content" href="" target="_blank">link 1</a>
  </div>

Answer 1

您需要定位 a 元素，以便在这两种情况下都可以使用额外的包装器并调整 CSS，如下所示:

我还更正了无效的 HTML，因为您只能使用 li 作为 ul 的子级

ul {
  list-style-type: none;
}

.dropdown {
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
}

.dropdown-content a {
  text-decoration: none;
}

.dropdown-content a:hover {
  text-decoration: underline;
}

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

<ul>
  <li class="dropdown">list item 1
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a><br>
      <a href="" target="_blank">link 2</a>
    </div>
  </li>

  <li class="dropdown">list item 2
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a>
    </div>
  </li>
</ul>