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

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