html - 如何将超链接添加到悬停下拉菜单的主标题？

Question

我正在为我的 eBay 列表创建下拉菜单。我已经到了喜欢菜单功能的地步，但还想完善它们。我目前有可悬停的下拉菜单。当我将鼠标悬停在菜单上时，菜单中会显示一个下拉列表，每个标题都超链接到其各自的页面。我想要做的是添加一个指向悬停标题本身的超链接。例如，如果我将鼠标悬停在菜单标题上，则会出现一个下拉列表。我想要做的是能够点击菜单的标题，并让它也带我到一个特定的网页。

我没有太多 CSS 编程经验。通过在 w3schools.com 上的研究，我已经成功地创建了菜单。我还没有想出办法做到这一点，也没有运气研究它。

<style>
.dropbtn {
  background-color: #21205F;
  color: white;
  width: 130px;
  padding: 10px;
  font-size: 1.325em;
  font-family: "Times New Roman", Times, serif;
  margin: 2px;
  border: none;
  cursor: pointer;
  border-radius: 10px;
}

.dropdown {
  float: left;
  display: inline-block;
}

.dropdown-content {
  border-radius: 10px;
  display: none;
  position: absolute;
  background-color: #21205F;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {background-color: #66BD29}

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

.dropdown:hover .dropbtn {
  background-color: #66BD29;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Menu Title</button>
  <div class="dropdown-content">
  <a href="My Link 1">Link 1 Title</a>
  <a href="My Link 2">Link 2 Title</a>
  <a href="My Link 3">Link 3 Title</a>
  </div>
</div>

我希望在菜单标题中添加一个 href 链接。当点击菜单标题时，我希望能将用户带到一个特定的链接。我希望我可以使用提供的代码来完成它，但可能需要完全重建我如何编写此菜单。我目前正在将 .dropbtn 与来自 w3schools.com 的 .dropdown 和 .dropdown-content 一起使用。

Answer 1

您可以在按钮内添加一个 A 标签。

HTML:

<button class="dropbtn">
    <a href="#"> <!––added-->
        Menu Title
    </a>
</button>

CSS:

.dropbtn>a { /*added*/
    text-decoration: none;
    color: inherit;
}