在HTML中實現下拉菜單

Question

我正在使用HTML和CSS創建一個水平導航欄。這項工作很簡單，並且輕鬆完成。然後，我決定將下拉菜單包含在導航欄中最初出現的每個鏈接上。

作爲樣品分配，我創建與三通「Dropdown1」水平導航欄，「Dropdown2」，「Dropdown3」，然後加到下拉菜單到這三個鏈接。每個下拉菜單隻需要包含三個附加鏈接。 （總共3x3 = 9個下拉鍊接，這些下拉鍊接編號爲link01至link09）。

截圖導航欄的鏈接

的問題是，所有的下拉列表鏈接與每個導航條鏈接相關聯。我收到類似的輸出

時Dropdown1和Dropdown3都徘徊同樣適用。理想情況下，懸停在Dropdown1上必須只顯示Link01，Link02和Link03。同樣，懸停在Dropdown2上必須只顯示Link04，Link05和Link06等。

我寫的HTML代碼是

<ul> 
<div class="dropdown"> 
<li> 

<a href="#"> Dropdown1</a> 
<div class ="dropdown-content"> 
<a href="#">Link01</a><!-- actual content of the dropdown will consists of hyperlinks --> 
<a href="#">Link02</a> 
<a href="#">Link03</a> 
</div> 

</li> 

<li> 
<a href="#"> Dropdown2</a> 
<div class ="dropdown-content"> 
<a href="#">Link04</a><!-- actual content of the dropdown will consists of hyperlinks --> 
<a href="#">Link05</a> 
<a href="#">Link06</a> 
</div> 
</li> 
<li> 
<a href="#"> Dropdown3</a> 
<div class ="dropdown-content"> 
<a href="#">Link07</a><!-- actual content of the dropdown will consists of hyperlinks --> 
<a href="#">Link08</a> 
<a href="#">Link09</a> 
</div> 
</li> 
</div> <!--closing the dropdown container--> 

有什麼收穫？

Answer 1

首先，你的代碼是錯誤的。這不是一個有效的HTML。請在W3C驗證器中驗證您的代碼，然後再想想什麼時候想要問什麼。

其次，嘗試使用摘錄功能。

最後，檢查您的解決方案的CSS部分。

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; line-height: 1;} 
 
a {color: #fff; text-decoration: none; display: block;} 
 
.menu {display: inline-block; background-color: #999;} 
 
.menu::after {content: " "; display: block; clear: both;} 
 
.menu > li {float: left; position: relative;} 
 
.menu li a {padding: 15px;} 
 
.menu li:hover > a {background-color: #333;} 
 
.menu ul {display: none; background-color: #999; left: 0; right: 0;} 
 
.menu li:hover ul {display: block; position: absolute;}

<ul class="menu"> 
 
    <li> 
 
    <a href="">Dropdown 1</a> 
 
    <ul> 
 
     <li><a href="">Link 01</a></li> 
 
     <li><a href="">Link 02</a></li> 
 
     <li><a href="">Link 03</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Dropdown 2</a> 
 
    <ul> 
 
     <li><a href="">Link 01</a></li> 
 
     <li><a href="">Link 02</a></li> 
 
     <li><a href="">Link 03</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Dropdown 3</a> 
 
    <ul> 
 
     <li><a href="">Link 01</a></li> 
 
     <li><a href="">Link 02</a></li> 
 
     <li><a href="">Link 03</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

如果你想將所有9個鏈接顯示時，你可以使用這樣的事情：

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; line-height: 1;} 
 
a {color: #fff; text-decoration: none; display: block;} 
 
.menu {display: inline-block; background-color: #999; position: relative;} 
 
.menu::after {content: " "; display: block; clear: both;} 
 
.menu > li {float: left;} 
 
.menu li a {padding: 15px;} 
 
.menu li:hover > a {background-color: #333;} 
 
.menu ul {display: none; background-color: #999; left: 0; right: 0; -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; column-count: 3;} 
 
.menu li:hover ul {display: block; position: absolute;}

<ul class="menu"> 
 
    <li> 
 
    <a href="">Dropdown 1</a> 
 
    <ul> 
 
     <li><a href="">Link 1-01</a></li> 
 
     <li><a href="">Link 1-02</a></li> 
 
     <li><a href="">Link 1-03</a></li> 
 
     <li><a href="">Link 1-04</a></li> 
 
     <li><a href="">Link 1-05</a></li> 
 
     <li><a href="">Link 1-06</a></li> 
 
     <li><a href="">Link 1-07</a></li> 
 
     <li><a href="">Link 1-08</a></li> 
 
     <li><a href="">Link 1-09</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Dropdown 2</a> 
 
    <ul> 
 
     <li><a href="">Link 2-01</a></li> 
 
     <li><a href="">Link 2-02</a></li> 
 
     <li><a href="">Link 2-03</a></li> 
 
     <li><a href="">Link 2-04</a></li> 
 
     <li><a href="">Link 2-05</a></li> 
 
     <li><a href="">Link 2-06</a></li> 
 
     <li><a href="">Link 2-07</a></li> 
 
     <li><a href="">Link 2-08</a></li> 
 
     <li><a href="">Link 2-09</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Dropdown 3</a> 
 
    <ul> 
 
     <li><a href="">Link 3-01</a></li> 
 
     <li><a href="">Link 3-02</a></li> 
 
     <li><a href="">Link 3-03</a></li> 
 
     <li><a href="">Link 3-04</a></li> 
 
     <li><a href="">Link 3-05</a></li> 
 
     <li><a href="">Link 3-06</a></li> 
 
     <li><a href="">Link 3-07</a></li> 
 
     <li><a href="">Link 3-08</a></li> 
 
     <li><a href="">Link 3-09</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

我已經使用CSS3列於以上。