HTML+CSSを使用してシンプルなドロップダウンメニューを作成するサンプルコード

ページ レイアウト中に、ドロップダウン リストがよく使用されます。Web フロントエンド開発者として、HTML ドロップダウン メニューの作成方法をご存知ですか?この記事では、HTML と CSS のドロップダウン メニュー コードを紹介します。興味のある方は参考にしてください。

HTML ドロップダウン メニューを作成する場合、ホバー、リスト スタイル、フロート、表示属性などの多くの CSS 属性が使用されます。よくわからない場合は、以前の記事を参照してください。以前に紹介したことがある場合は、CSS3 ビデオ チュートリアル にアクセスしてください。

デモの例: マウスが「学習ビデオ」を通過すると、JavaScript、C などの関連するコース カテゴリが表示されます。具体的なコードは次のとおりです。

HTML 部分:

<div id="nav">    
      <ul>    
          <li><a href="#">首页</a></li>    
          <li><a href="#">学习视频</a>    
              <ul>    
                  <li><a href="#">java</a></li>    
                  <li><a href="#">jQuery</a></li>    
                  <li><a href="#">C++</a></li>    
                  <li><a href="#">PHP</a></li>
                  <li><a href="#">JavaScript</a></li> 
              </ul>            
          </li>    
          <li><a href="#">个人中心</a></li>    
          <li><a href="#">关于我们</a></li>    
      </ul>    
  </div>

CSS 部分:

   *{ margin:0px; padding:0px;}    
   #nav{ width:600px; height:40px; margin:0 auto;}    
   #nav ul{ list-style:none;}    
   #nav ul li{width: 150px; float:left; line-height:40px; text-align:center; position:relative;}    
   #nav ul li a{ text-decoration:none; color:#000; display:block;text-align: center;}    
   #nav ul li a:hover{ color:#FFF; background:#333}    
   #nav ul li ul{ position:absolute; display:none;}    
   #nav ul li ul li{ float:none; line-height:30px; text-align:left;}    
   #nav ul li ul li a{ width:100%;}    
   #nav ul li ul li a:hover{ background-color:#06f;}    
   #nav ul li:hover ul{ display:block}

レンダリング:

上記では主に HTML と CSS を使用して作成する方法を紹介します。仕事で使用するドロップダウン メニューを必要としている友人もたくさんいます。この記事が役立つことを願っています。

【おすすめの関連チュートリアル】

1. HTML ビデオ チュートリアル
2. CSS ビデオ チュートリアル
3.ブートストラップ チュートリアル

以上がHTML+CSSを使用してシンプルなドロップダウンメニューを作成するサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。