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:

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

• タグのリストを削除します。 -style と タグのデフォルトの下線。

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

  
  

  
  ページのプレビュー効果は図に示すとおりです。ステップ 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) に注目してください。