ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で 2 番目のドロップダウン メニューを記述する方法
#このチュートリアルの動作環境: Dell G3 コンピューター、Windows7 システム、Chrome76.0&&CSS3 バージョン。 推奨事項: "CSS で 2 番目のドロップダウン メニューを記述する方法: 最初に HTML サンプル ファイルを作成し、次に CSS の表示属性を使用して 2 番目のドロップダウン メニューを表示するかどうかを制御し、最後にブラウザ経由で効果を実行します。
css ビデオ チュートリアル "
セカンダリ ナビゲーション ドロップダウン メニューを実装するための純粋な CSS
考え:CSS の表示属性を使用して、2 番目のドロップダウン メニューを表示するかどうかを制御します。マウスを第 1 レベルのナビゲーション メニューの li タグに移動すると、第 2 レベルのナビゲーション メニューの ul タグが表示されます。実装は比較的単純なので、リファレンス コードをここに直接示します。 純粋な CSS セカンダリ ナビゲーション ドロップダウン メニュー コード
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" content="text/html" http-equiv="content-type"> <title>纯css二级导航下拉菜单</title> <meta name="keyword" content="关键字"> <meta name="description" content="描述"> <style type="text/css"> *{margin: 0;padding: 0;} #bg{background: red;width: 100%;height: 35px;} nav{height: 35px;width: 1000px;margin: 0 auto;} nav ul li{list-style-type:none;float: left} nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px; text-align: center;color:white;font-fimily:微软雅黑;} nav ul li ul li{float: none} nav ul li ul li a{color:black} nav ul li ul{display: none;} nav ul li:hover ul{display: block;} </style> </head> <body> <div id="bg"> <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> </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> </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> <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> </ul> </li> </ul> </nav> </div> </body> </html>実行中の効果:
以上がCSS で 2 番目のドロップダウン メニューを記述する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。