Html Css初心者ドロップダウンナビゲーションバーメニューを作成

Question

私は初心者です。& htmlの初心者です。ナビゲーションバー内にドロップダウンメニューを作成する際に問題が発生しています。ドロップダウンメニュー "製品"では、クリックするとドロップダウンメニューの一覧が表示されません。誰かが問題を指摘できれば、私は本当に感謝しています。以下は、ナビゲーションバーのHTMLコードさ：

.Navigation { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #4C4747; 
 
    border: 2px; 
 
    border-radius: 5px; 
 
} 
 
.Navigation li { 
 
    list-style-type: none; 
 
    float: left; 
 
} 
 
.Navigation li a { 
 
    border-right: 2px solid black; 
 
    font-family: sans-serif; 
 
    color: white; 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 10px 15px 10px 15px; 
 
} 
 
.dropdown li { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
} 
 
.dropdown-content a { 
 
    color: white; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
.dropdown:hover .dropbtn { 
 
    display: block; 
 
}

<ul class="Navigation"> 
 
    <li><a href="Home.html">HOME</a> 
 
    </li> 
 

 
    <!-- Dropdown --> 
 
    <li class="dropdown"> 
 
    <a href="Product.html" class="dropbtn">PRODUCT</a> 
 
    <div class="dropdown-content"> 
 
     <a href="Computer.html">COMPUTER</a> 
 
     <a href="Laptop.html">LAPTOP</a> 
 
     <a href="Smartphone.html">SMARTPHONE</a> 
 
    </div> 
 
    </li> 
 
    <!-- --> 
 
    <li><a href="#news">ABOUT</a> 
 
    </li> 
 
</ul>

Answer 1

あなたの.dropbtnこのような.dropdown-contentに変更する必要があります。

.dropdown:hover .dropdown-content{ 
    display: block; 
} 

ここでは、コードの抜粋です：

.Navigation { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #4C4747; 
 
    border: 2px; 
 
    border-radius: 5px; 
 
} 
 

 
.Navigation li { 
 
    list-style-type: none; 
 
    float: left; 
 
} 
 

 
.Navigation li a { 
 
    border-right: 2px solid black; 
 
    font-family: sans-serif; 
 
    color: white; 
 
    display: block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 10px 15px 10px 15px; 
 
    } 
 

 
.dropdown li { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
} 
 

 
.dropdown-content a { 
 
    color: white; 
 
    text-decoration: none; 
 
    display: block; 
 
    background-color: #4c4747; 
 
} 
 
.dropdown:hover .dropdown-content{ 
 
    display: block; 
 
}

<ul class="Navigation"> 
 
<li><a href="Home.html">HOME</a></li> 
 

 
      <!-- Dropdown --> 
 
    <li class="dropdown"> 
 
    <a href="Product.html" class="dropbtn">PRODUCT</a> 
 
     <div class="dropdown-content"> 
 
      <a href="Computer.html">COMPUTER</a> 
 
      <a href="Laptop.html">LAPTOP</a> 
 
      <a href="Smartphone.html">SMARTPHONE</a> 
 
     </div> 
 
    </li> 
 
      <!-- --> 
 
    <li><a href="#news">ABOUT</a></li> 
 
</ul>

Answer 2

あなたは、このいずれかを試すことができます：

.Navigation { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #4C4747; 
    border: 2px; 
    border-radius: 5px; 
} 

.Navigation li { 
    list-style-type: none; 
    float: left; 
} 

.Navigation li a { 
    border-right: 2px solid black; 
    font-family: sans-serif; 
    color: white; 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    padding: 10px 15px 10px 15px; 
    } 

.dropdown li { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #4C4747; 
} 

.dropdown-content a { 
    color: white; 
    text-decoration: none; 
    display: block; 
} 
.dropdown-content a:hover 
{ 
    background-color:red; 
} 
.dropdown:hover .dropdown-content{ 
    display: block; 
} 

DEMO HERE