html - 如何转一个将列表放入下拉菜单

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;
}

标签： htmlcsslistdrop-down-menunav

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>

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