検索
ホームページウェブフロントエンドCSSチュートリアルCSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)

CSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)

青灯夜游
青灯夜游
Sep 12, 2018 pm 04:07 PM
垂直ナビゲーション水平ナビゲーション

この章では、CSS を使用して二次メニュー効果を実現する方法を紹介します。水平メニューと垂直メニューの実装 (コード例)。 HTML + CSS コードを使用して 2 つの異なるセカンダリ メニュー効果を作成する方法は、必要な場合に参考にしていただければ幸いです。

1. CSS は水平のセカンダリ メニュー スタイルを実装します

CSS は水平のセカンダリ メニュー コードを実装します: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单--水平</title>
		<style>
			*{margin: 0;padding: 0;}
	        .demo{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 class="demo">
			<nav>
			    <ul>
			        <li><a href="#">菜单1</a>
			        <ul>
			            <li><a href="#">菜单1</a></li>
			            <li><a href="#">菜单1</a></li>
			            <li><a href="#">菜单1</a></li>
			            <li><a href="#">菜单1</a></li>
			        </ul>
			        </li>
			        <li><a href="#">菜单2</a>
			            <ul>
			                <li><a href="#">菜单2</a></li>
			                <li><a href="#">菜单2</a></li>
			                <li><a href="#">菜单2</a></li>
			            </ul>
			        </li>
			        <li><a href="#">菜单3</a>
			            <ul>
			                <li><a href="#">菜单3</a></li>
			                <li><a href="#">菜单3</a></li>
			                <li><a href="#">菜单3</a></li>
			                <li><a href="#">菜单3</a></li>
			            </ul>
			        </li>
			        <li><a href="#">菜单4</a>
			            <ul>
			                <li><a href="#">菜单4</a></li>
			                <li><a href="#">菜单4</a></li>
			                <li><a href="#">菜单4</a></li>
			            </ul>
			        </li>
			        <li><a href="#">菜单5</a>
			            <ul>
			                <li><a href="#">菜单5</a></li>
			                <li><a href="#">菜单5</a></li>
			                <li><a href="#">菜单5</a></li>
			                <li><a href="#">菜单5</a></li>
			                <li><a href="#">菜单5</a></li>
			            </ul>
			        </li>
			        <li><a href="#">菜单6</a>
			            <ul>
			                <li><a href="#">菜单6</a></li>
			                <li><a href="#">菜单6</a></li>
			                <li><a href="#">菜单6</a></li>
			                <li><a href="#">菜单6</a></li>
			            </ul>
			        </li>
			    </ul>
			</nav>
		</div>
	</body>
</html>

レンダリング:

マウスは上に移動しません:

CSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)

Mouse Move to menu 1 :

CSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)

上記の例からわかるように、CSS の display 属性を使用して、2 番目のドロップダウン メニューを表示するかどうかを制御します。 1階層目のメニューのliタグにマウスを移動すると、2階層目のメニューのulタグが表示されます。

コアコード:

list-style-type:none - ドットを削除します。

float: 最初のレベルのメニューが水平に表示されるように、左に left-float します。

:hover - マウス ポインターが浮いている要素を選択するために使用されます。

display:none - 二次メニューを非表示にします。

display:block - リンクをブロック要素として表示すると、リンク領域全体 (テキストだけでなく) をクリック可能になり、幅を指定することもできます。

最初に第 2 レベルのメニューを非表示にすると、第 1 レベルのメニューの li タグにマウスが移動すると、第 2 レベルのメニューの ul タグが表示されます。

2. 垂直セカンダリメニュースタイルを実装するCSS

垂直セカンダリメニューコードを実装するCSS: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>二级菜单--垂直</title>
		<style type="text/css">
			body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
			img { border-style: none; }
			a { color: #000; text-decoration: none; }
			a:hover { color: #F00; }
			#menu { width: 200px; border: 1px solid #CCC; border-bottom:none;margin:50px auto;text-align: center;}
			#menu ul { list-style: none; margin: 0px; padding: 0px; }
			#menu ul li { background: #289CFF;color: #fff; padding: 0px 10px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
			#menu ul li ul { display:none; position: absolute; left: 200px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
			#menu ul li ul li{background-color: #21B4BB}
			#menu ul li:hover{background-color: #21B4BB}
			#menu ul li:hover ul { display:block;}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li>
					<a href="">菜单1</a>
					<ul>
						<li>
							<a href="#">菜单1</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">菜单2</a>
					<ul>
						<li>
							<a href="#">菜单2</a>
						</li>
						<li>
							<a href="#">菜单2</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">菜单3</a>
					<ul>
						<li>
							<a href="#">菜单3</a>
						</li>
						<li>
							<a href="#">菜单3</a>
						</li>
						<li>
							<a href="#">菜单3</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

レンダリング:

マウスは上に移動しません:

CSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)

マウスはメニューに移動します2 上:

CSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)

上の例からわかるように、CSS の表示属性は、2 番目のドロップダウン メニューを表示するかどうかを制御するためにも使用されます。 1階層目のメニューのliタグにマウスを移動すると、2階層目のメニューのulタグが表示されます。

コアコード:

list-style-type:none - ドットを削除します。

:hover - マウス ポインターが浮いている要素を選択するために使用されます。

display:none - 二次メニューを非表示にします。

display:block - リンクをブロック要素として表示すると、リンク領域全体 (テキストだけでなく) をクリック可能になり、幅を指定することもできます。

position :relative/absolute -- プライマリ メニューの隣にセカンダリ メニューを表示する位置。

最初に第 2 レベルのメニューを非表示にすると、第 1 レベルのメニューの li タグにマウスが移動すると、第 2 レベルのメニューの ul タグが表示されます。

以上がCSSで二次メニュー効果を実現するにはどうすればよいですか?水平メニューと垂直メニューの実装 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか？@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか？Apr 18, 2025 am 11:34 AM

先日、この質問がありました。私の最初の考えは、奇妙な質問です！特異性はセレクターに関するものであり、アットレールはセレクターではないので、...無関係ですか？

@mediaと@supportのクエリをネストできますか？@mediaと@supportのクエリをネストできますか？Apr 18, 2025 am 11:32 AM

はい、あなたはできます、そしてそれは本当にどの順序で重要ではありません。 CSSプリプロセッサは必要ありません。通常のCSSで動作します。

クイックガルプキャッシュバストクイックガルプキャッシュバストApr 18, 2025 am 11:23 AM

CSSやJavaScript（および画像とフォントなど）などのアセットにファーアウトキャッシュヘッダーを確実に設定する必要があります。それはブラウザを伝えます

CSSの品質と複雑さを監視するスタックを探してCSSの品質と複雑さを監視するスタックを探してApr 18, 2025 am 11:22 AM

多くの開発者は、CSSコードベースを維持する方法について書いていますが、そのコードベースの品質をどのように測定するかについて多くの人が書いていません。確かに、私たちは持っています

データリストは、値を強制せずに値を提案するためのものですデータリストは、値を強制せずに値を提案するためのものですApr 18, 2025 am 11:08 AM

短い任意のテキストを受け入れるために必要なフォームを持っていたことがありますか？名前などのように。それはまさにそのためのものです。たくさんあります

チューリッヒでのフロント会議チューリッヒでのフロント会議Apr 18, 2025 am 11:03 AM

私は、フロント会議のためにスイスのチューリッヒに向かうことにとても興奮しています（その名前とURLが大好きです！）。私はこれまでスイスに行ったことがないので、興奮しています

CloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますCloudFlareワーカーとのフルスタックサーバーレスアプリケーションを構築しますApr 18, 2025 am 10:58 AM

ソフトウェア開発における私のお気に入りの開発の1つは、サーバーレスの出現です。詳細に行き詰まる傾向がある開発者として

NUXTアプリケーションで動的ルートを作成しますNUXTアプリケーションで動的ルートを作成しますApr 18, 2025 am 10:53 AM

この投稿では、私が構築して展開して展開してネットライフを使用して、着信データの動的ルートを作成する方法を示すeコマースストアのデモを使用します。それはかなりです

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
1 か月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
1 か月前By尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前ByDDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前ByDDD
Will R.E.P.O.クロスプレイがありますか？
1 か月前By尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7561
15
CakePHP チュートリアル
1384
52
Steamのアカウント名の形式は何ですか
84
11
Win11 Activation Key Permanent
60
19
NYTの接続はヒントと回答です
28
98
もっと見る