如何添加超链接到可收起的下拉菜单的主标题？

Question

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

我没有太多编程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;
}

Answer 2

您只需要用A标签替换按钮标签即可。

<div class="dropdown">
  <a href="My Top Link" class="dropbtn">Menu Title</a>
  <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>