hye. how can i make a dropdown menu with tag <a> instead of button?
i did try with button tag but it kinda mess with my layout. i want to do it with <a> tag but the dropdown box went over the text which makes it go missing instead of being under the text.
it's hard to explain here. but you can see in more details of what is the
nav {
position: fixed;
top: 0;
left: 0;
height: 4em;
width: 100%;
background-color: black;
box-sizing: border-box;
padding: 20px 24px;
transition: background-color 0.4s ease-out;
}
nav a {
float: right;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 15px;
font-weight: 430;
color: lightgrey;
}
nav a.active{
color: #d4af37;
}
nav a:hover:not(.active){
color: white;
}
nav.scroll {
background-color: black;
opacity: 0.8;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
text-align: center;
font-family: Poppins;
font-size: 15px;
font-weight: 430;
color: lightgrey;
padding: 0px 16px;
top: 100%;
background-color: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 250px;
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}<nav id="navbar"><div style="padding-left:105px; padding-right:120px;"><a style="color: white; font-weight: bold; font-size: 20px; float:left">LOGO<a href="blog.html">Book A Trip</a><div class="dropdown"><a class="dropbtn">Tours & Activity</a><div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></div><a href="rooms.html">About</a><a class="active" href="index.html">Home</a></div></nav>problem at https://jsfiddle.net/idfrnffnd/2ynju1ax/6/
the problem is at tours&activity button