如何使用 <a>
标签而不是按钮来制作下拉菜单?
我尝试使用按钮标记,但这会干扰我的布局。我想使用 <a>
标记来实现,但是下拉框会覆盖文本,导致文本消失而不是在文本下方。
在下方的详细说明中可以更清楚地看到。
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>
问题出在“旅游和活动”按钮上。