CSSを使ってドロップダウンメニューを書く方法です。 _html/css_WEB-ITnose

CSSを使用してドロップダウンメニューを作成する方法。 _html/css_WEB-ITnose

ナビゲーション メニューはすべての Web サイトに必要な機能であり、Web サイトの作成を学ぶすべての友人にとっても必須です。 CSS スタイルを使用してシンプルで美しい 2 番目のドロップダウン メニューを作成する方法はありますか。

私の経験を皆さんと共有しましょう

方法のステップ:

ステップ 1 :

ホームページで Sublime Text または他のエディタを開き、nav という名前のナビゲーション メニューを作成します

<p class="nav">
<ul>
<li><a href="#">栏目一</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</p>

図のように下の図:

ステップ 2:

次に、ナビゲーションにスタイルを追加し、最初にデフォルトのマージンとパディングを削除します。次に、ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6 タグのリストを削除します。 -style と 3499910bf9dac5ae3c52d5ede7383485 タグのデフォルトの下線。

次に、次のスタイルなどの適切なスタイルを追加します (実際のニーズに応じて追加します)。

ページのプレビュー効果は図に示すとおりです。ステップ 3:

このように、メニューの水平メニューが構築されます。次に、2 番目のドロップダウン メニューを列 1、列 2、列 3 に追加します

コードは次のとおりです:

<p class="nav">
<ul>
<li><a href="#">栏目一</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目二</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目三</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</p>

ステップ4：secondareセカンダリ列を追加した後、CSSスタイルを追加し始めます。それから削除します

タグをフローティング スタイルにして、次のスタイルのように

タグを適切に変更します。

コードは次のとおりです:

.nav ul li ul {
　　position:absolute;
}
.nav ul li ul li {
　　float:none;
}
.nav ul li ul li a {
　　border-right:none;
　　border-top:1px dotted #ccc;
　　background:#f5f5f5;
}

ページの更新効果は次のとおりです。以下に示す:

ステップ 5:

• 次に、2 番目のドロップダウン メニューを非表示にし、それにマウス スライド効果を追加します。これにより、マウスがメイン列にスライドすると、2 番目のドロップダウン メニューが表示されます。次のスタイル:

  .nav ul li ul { 
  　　position:absolute; 
  　　display:none;
  }
  .nav ul li ul li {
   　　float:none;
  }
  .nav ul li ul li a { 
  　　border-right:none; 
  　　border-top:1px dotted #ccc;
   　 background:#f5f5f5;
  }
  .nav ul li:hover ul{
   　 display:block; 
  }

以下の図に示すように、効果を再度プレビューします:

ステップ 6:

この時点で、水平の 2 番目のドロップダウン メニューがすべて完成しました。ご参照いただきありがとうございます。

• 上記はCSSを使用したドロップダウンメニューの書き方です。 _html/css_WEB-ITnose コンテンツ、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。