HTMLのドロップダウンメニューの実装

Question

HTMLとCSSを使用して水平ナビゲーションバーを作成しています。この作品は簡単で簡単でした。そして、ナビゲーションバーにもともと存在していた各リンクにドロップダウンメニューを含めることにしました。

サンプルの割り当てとして、「Dropdown1」、「Dropdown2」、「Dropdown3」という3つのリンクを持つ水平ナビゲーションバーを作成し、これら3つのリンクのそれぞれにドロップダウンメニューを追加しました。各ドロップダウンメニューには、3つの追加リンクのみが含まれている必要があります。 （合計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 Validatorでコードを親切に検証してください。

第2に、スニペット機能を使用してみてください。

最後に、ソリューションの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つのリンクを持っているしたい場合は、このようなものを使用することができます：私はCSS3の列を使用していた

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

を上記。