How to add hyperlink to main title of hoverable dropdown menus?

I am working on creating dropdown menus for my eBay listings. I have gotten to a point where I like the functionality of my menus, but want to perfect them. I currently have hoverable dropdown menus. When I hover over a menu, a drop down list is shown from the menu and each title is hyperlinked to its respective page. What I want to do is add a hyperlink to the hoverable title itself. For example, if I hover over the title of the menu, a dropdown list appears. What I would like to do is be able to click on the title of the menu and have it also take me to a specific web page.

I don't have much experience programming CSS. I have been successful in creating menus from researching it on w3schools.com. I have not figured out a way to do this, and haven't had any luck researching it.

<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>

I hope to add an href link to the Menu Title. When clicked on the menu title, I hope that could take the user to a specific link. I hope that I could do it with the code provided, but maybe it would require a complete reconstruction of how I program this menus. I am currently using .dropbtn with .dropdown and .dropdown-content from w3schools.com.

Solution

You can just add an A tag inside your button.

HTML:

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

CSS :

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