Как превратить <nav>со списками в выпадающее меню - PullRequest
Новая
       6

Как превратить <nav>со списками в выпадающее меню

0 голосов
/ 20 февраля 2019

У меня проблемы с превращением навигации в выпадающее меню.Я пробовал много способов, но я не могу превратить свою навигацию в выпадающее меню.Я не понимаю, что я делаю не так.Решения, которые я пробую, выглядят как руководства, которые я пытался использовать.Не повезло.Вот мой код.

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

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019 

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>

// вот и все ...

0 голосов
/ 20 февраля 2019

Может быть, вы могли бы попробовать это 

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>

Это отобразит списки при наведении курсора на кнопку.

...