导航中的HTML下拉菜单

Question

我制作了一个导航栏，其中有一些标签，但是我想制作一个下拉菜单，该菜单会在悬停在流派选项卡中显示。代码是这样的：

<nav>
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">PLaying Now</a></li>
  <li><a href="index.html">Genre</a></li>
</ul>
</nav>

css代码是：

nav { /* Navbar align */
  text-align:center;
}

ul { /* Navbar settings */
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li { /* Text align */
  float: left;
}

li a { /* Menu variable */
  display: block;
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 16px 16px;   /* height width */
  text-decoration: none;
}

li a:hover:not(.active) { /* Tab over mouse */
  background-color: #111;
}

.active { /* Tab active color */
  background-color: #791519;
}

为了实现这一目标，我必须做些什么改变？

Answer 1

在Genre添加您需要的链接   <li><a href="index.html">Genre</a></li>

<li><a href="index.html">Genre</a>
   <ul>
      <li><a href="link.html">Link</a></li>
   </ul>
</li>

然后添加到您的CSS

ul ul { display: none; }
ul li:hover ul { display: block; }

Answer 2

在这里，将W3Schools教程与您的代码结合起来。

W3Schools教程链接：LINK

的 CSS

nav { /* Navbar align */
        text-align:center;
    }

    ul { /* Navbar settings */
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li { /* Text align */
        float: left;
    }

    li a { /* Menu variable */
        display: block;
        color: white;
        font-size: 20px;
        text-align: center;
        padding: 16px 16px;   /* height width */
        text-decoration: none;
    }

    li a:hover:not(.active) { /* Tab over mouse */
        background-color: #111;
    }

    .active { /* Tab active color */
        background-color: #791519;
    }

    /* DROPDOWN */
    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

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

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

<强> HTML

<nav>
<ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="index.html">Playing Now</a></li>
    <li class="dropdown">
        <a href="index.html" class="dropbtn">Genre</a>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </li>
</ul></nav>