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

Question

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">
Link 1 Title
Link 2 Title
Link 3 Title
</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.

Answer 1

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

Answer 2

You just need to replace the button tag with an A tag.
<div class="dropdown">
Menu Title
<div class="dropdown-content">
Link 1 Title
Link 2 Title
Link 3 Title
</div>
</div>