如何将带有列表的 <nav> 变成下拉菜单

Question

我无法将导航栏转换为下拉菜单。我尝试了很多方法，但无法将导航栏变成下拉菜单。我不明白我做错了什么。我正在尝试的解决方案看起来像我尝试遵循的指南。没有运气。这是我的代码。

HTML

<nav>
    <button class="dropdown-menu">Menu</button>
    <ul>
        <li><a href="Fighting%20Kites.html">Fighting Kites</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="Membership.html">Membership</a></li>
        <li><a href="index.html">Index</a></li>
    </ul>
</nav>

CSS

nav ul{
display: none;
}
nav ul:hover .dropdown-menu{
display: block;
}

Answer 1

也许你可以试试这个

nav ul{
  display: none;
  list-style: none;
}

nav:hover  ul{
  display: block;
}

<nav>
    <button class="dropdown-menu">Menu</button>
    <ul>
        <li><a href="Fighting%20Kites.html">Fighting Kites</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="Membership.html">Membership</a></li>
        <li><a href="index.html">Index</a></li>
    </ul>
</nav>

当您将鼠标悬停在按钮上时，将显示列表。

Answer 2

nav ul{
display: none;
}
nav .dropdown-menu:hover ul{
display: block;
}

<nav>
    <button class="dropdown-menu">Menu <ul>
        <li><a href="Fighting%20Kites.html">Fighting Kites</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="Membership.html">Membership</a></li>
        <li><a href="index.html">Index</a></li>
    </ul>
  </button>
</nav>

//就这些了...

如何将带有列表的 <nav> 变成下拉菜单

How to turn a <nav> with lists into a dropdown menu

html

css

list

nav

drop-down-menu