ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。