如何使用标签a制作下拉菜单？

Question

如何使用 <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>

fiddle链接

问题出在“旅游和活动”按钮上。

- Drape Tomania

---

也许这两个例子可以帮助你：1. https://codverter.com/src/webeditor?query=317b860f-b561-409d-ab68-83f8a6dda031 2. https://codverter.com/src/webeditor?query=7f6d05e7-9289-42dc-b443-84321e38a6b7 - Jonathan Applebaum

Answer 1

将代码复制到HTML文件中，以更有效地尝试链接

我将包含链接的<div>转换为下拉列表，并对CSS文件进行了必要的修改，从a到option。我将<select>设置为下拉列表，并始终打开显示的链接数量size = "3"

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: lightgrey;
     min-width: 250px;
     z-index: 1;
   }

   .dropdown-content option {
     float: none;
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
   }

   .dropdown-content option: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>
    <a href="blog.html">Book A Trip</a>
        <div class="dropdown">
        <a class="dropbtn">Tours &amp; Activity</a>
        <select class="dropdown-content" size="3" onchange="window.location=this.options[this.selectedIndex].value">
          <option value="https://www.facebook.com">link 1</option>
          <option value="https://www.google.com">link 2</option>
          <option value="https://www.youtube.com">link 3</option>
         </select>
        </div>
    <a href="rooms.html">About</a>
    <a class="active" href="index.html">Home</a>
    </div>
</nav>

- Wassim Al Ahmad

Answer 2

你可以使用。

<div class="dropdown">
   <a class="dropbtn">Tours & Activity</a>
    <div class="dropdown-content">
        <a href="#"><button>link 1</button ></a>
        <a href="#"><button>link 2</button ></a>
        <a href="#"><button>link 3</button ></a>
    </div>
</div>

- Has San

Answer 3

我重新创建了您的项目，使用列表元素作为菜单更好。

body{
  margin:0
}

*{
  box-sizing:border-box
}

nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:black;
  padding:1.5rem 8rem;
}

nav .nav-logo{
  font-size:calc(1rem + .25rem);
  color:white;
  font-weight:bold
}

nav a{
  color:lightgrey;
  text-decoration:none;
  font-size:1rem
}

nav a.active{
  color:#d4af37
}

nav a:hover:not(.active){
  color:white
}

nav ul{
  list-style:none;
  padding:0;
  margin:0;
}

nav ul:not(.dropdown-content){
  display:flex;
}


nav ul > li{
  margin-right:1rem
}

.dropdown{
  position:relative;
}

.dropdown-content{
  position:absolute;
  top:1.5rem;
  background:grey;
  opacity:0;
  visibility:hidden;
  transition:250ms
}

.dropdown a:hover ~ .dropdown-content, .dropdown-content:hover{
  opacity:1;
  visibility:visible
}



.dropdown-content li a{
  font-size:calc(1em - 1px);
  padding:.8rem;
  display:flex;
  min-width:10rem
}

<nav>
  <div class="nav-left">
    <a href="#" class="nav-logo">LOGO</a>
  </div>
  <div class="nav-right">
    <ul>
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="dropdown">
        <a href="#">Tours & Activity</a>
        <ul class="dropdown-content">
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a></li>
       <li><a href="#">Link 3</a></li>
        </ul>
      </li>
      <li><a href="#">Book A Trip</a></li>
    </ul>
  </div>
</nav>

- novruzrhmv

Answer 4

你应该设置.dropdown-content的顶部位置，例如：

.dropdown-content {
    top: 35px;
}

但我给你一个更好的方法，这样下拉菜单将绝对相对于它的父元素.dropdown

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 4em;
  width: 100%;
  background-color: black;
  box-sizing: border-box;
  padding: 0px 24px;
  transition: background-color 0.4s ease-out;
}

nav a {
  float: right;
  text-align: center;
  padding: 20px 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;
  position: relative;
}

.dropdown .dropbtn {
  text-align: center;
  font-family: Poppins;
  font-size: 15px;
  font-weight: 430;
  color: lightgrey;
  padding: 20px 16px;
  top: 100%;
  background-color: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  z-index: 1;
  top: 100%;
}

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

请注意我对你的类所做的更改。

- Αntonis Papadakis