Выпадающее меню HTML в навигации

Я сделал панель навигации с несколькими вкладками, но я хочу создать раскрывающееся меню, которое появляется при наведении на вкладку жанра. Код выглядит следующим образом:

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

Что я должен изменить, чтобы это произошло?


menu html dropdown
person xitro    schedule 17.10.2016    source источник
comment
Прочитайте это. Это довольно просто реализовать: w3schools.com/howto/howto_js_dropdown.asp   -  person MSarandev    schedule 18.10.2016
comment
Да, я видел это, но когда я попытался заставить его работать с моим кодом, у меня возникли некоторые проблемы. Вот почему я спросил. Мне было интересно, может ли кто-нибудь помочь мне с кодом, который у меня уже есть.   -  person xitro    schedule 18.10.2016

Ответы (2)


arrow_upward
0
arrow_downward

Добавьте нужные ссылки в Жанр <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; }
person Fluchaa    schedule 17.10.2016
comment
Я попробовал это, это хорошо, но недостаточно, потому что строка меню становится больше, а не появляется новое меню. - person xitro; 18.10.2016
comment
Затем вы должны использовать Javascript/jQuery, чтобы открыть внешнее меню при наведении или щелчке. - person Fluchaa; 18.10.2016

arrow_upward
0
arrow_downward

Здесь объединено руководство W3Schools с вашим кодом.

Ссылка на учебник W3Schools: ССЫЛКА

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>
person MSarandev    schedule 17.10.2016
comment
да, я сам сделал эти исправления, но когда появляется выпадающее меню, вся панель навигации становится больше, поэтому выпадающее меню может появиться. - person xitro; 18.10.2016
comment
потому что я хочу, чтобы выпадающее меню было относительным, чтобы оно могло отображаться поверх некоторых изображений, которые у меня есть ниже. - person xitro; 18.10.2016
comment
Верно, вот изображение двух навигаторов, расположенных рядом друг с другом: ссылка Если ваша навигация изменится высота, это не из кода, который я вам предоставил. Немного отладьте свой код. Если позже у вас все еще возникнут проблемы, задайте другой вопрос, но лучше сформулируйте его. - person MSarandev; 18.10.2016