CSS ショッピング モール Web サイトでは、左側(cè)のカテゴリのドロップダウン ナビゲーション メニュー コードが一般的に使用されます。
<!doctype html>
<html lang="ja">
<頭>
<メタ文字セット="UTF-8">
<title>商城網(wǎng)站常用左側(cè)分類下拉導(dǎo)航菜單代碼</title>
<スタイル>
* {マージン: 0;パディング: 0; }
ボディ { マージン: 0;パディング: 0;テキスト裝飾: なし。フォントサイズ: 14px; }
li { リストスタイル: なし; }
.menu {幅: 1000ピクセル;高さ: 600ピクセル;マージン: 30px 自動(dòng);背景色: #ececec; }
.menu .menuTop { 背景色: #F10215;色: #fff;幅: 140ピクセル;高さ: 40ピクセル;パディング左: 20px;行の高さ: 40px;カーソル: ポインタ; }
.menu ul {幅: 160px;背景色: #fff;境界線: 2 ピクセルの実線 #F10215;ボックスのサイズ設(shè)定: ボーダーボックス;位置: 相対的; }
.menu ul li {高さ: 30px;パディング左: 8px;テキスト整列: 左;行の高さ: 30px;フォントサイズ: 13px;背景: url(image/1.png) 繰り返し禁止; z インデックス: 2; }
.menu ul li a { color: #7070770; }
.menu ul li a:hover { color: red;テキスト裝飾: 下線;カーソル: ポインタ; }
.menu ul li:hover { border: 1px ソリッド #DDD;境界線右: 0;背景畫像: なし; }
.menu ul li:hover .submenu { 表示: ブロック; }
.menu ul li:ホバースパン {幅: 30px;高さ: 30ピクセル;表示: インラインブロック;背景色: #FFF;フロート: 右; z インデックス: 100;位置: 相対的; }
.menu ul li .submenu { 位置: 絶対;左: 146ピクセル;トップ: 0;幅: 720ピクセル;高さ: 300ピクセル;ボーダー: 1px ソリッド #DDD;ボックスシャドウ: 0 0 8px #DDD; -moz-box-shadow: 0 0 8px #DDD; -webkit-box-shadow: 0 0 8px #DDD;背景色: #FFF; z インデックス: 3;表示: なし。 }
.menu ul li .submenu .subleft { margin-left: 0px;幅: 400ピクセル;高さ: 300ピクセル;フロート: 左;パディング: 5px; }
.menu ul li .submenu .subleft dl { オーバーフロー: 非表示;ボーダーボトム: 1px ソリッド #D1D1D1;パディング: 10px 0; }
.menu ul li .submenu .subleft dl dt { float: left;高さ: 22ピクセル;行の高さ: 22px;右マージン: 10px;フォントの太さ: 太字;色: #707070;フォントサイズ: 12px;カーソル: ポインタ; }
.menu ul li .submenu .subleft dl dd { }
.menu ul li .submenu .subleft dl dd a {表示: ブロック;フロート: 左;ボーダー左: 1px ソリッド #707070;パディング: 0 5px;色: #707070;高さ: 14px;行の高さ: 14px;マージン: 3px 0;フォントサイズ: 11px; }
.menu ul li .submenu .subright {幅: 310px;高さ: 300ピクセル;背景色: 青;フロート: 左; }
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="メニュー">
<div class="menuTop">全部商品分類</div>
<ul>
<li> <a herf="javascript:;">第 1 レベルのタイトル 1</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>レベル 111</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルのタイトル</a> </dd>
</dl>
</div>
<div class="subright" style="background-color: Antiquewhite"> </div>
</div>
</li>
<li> <a herf="javascript:;">第 1 レベルのタイトル 2</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>第 2 レベルのタイトル 222</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルのタイトル 2</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:aquamarine"> </div>
</li>
<li> <a herf="javascript:;">第 1 レベルのタイトル 3</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>第 2 レベルのタイトル 333</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し 3</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:cadetblue"> </div>
</li>
<li> <a herf="javascript:;">第 1 レベルのタイトル 4</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>第 2 レベルのタイトル 444</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し 4</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkgrey"> </div>
</li>
<li> <a herf="javascript:;">第 1 レベルのタイトル 5</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>第 2 レベルのタイトル 555</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">レベル 3 タイトル 5</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:darkseagreen"> </div>
</li>
<li> <a herf="javascript:;">第 1 レベル タイトル 6</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>第 2 レベルのタイトル 666</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し 6</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lavender"> </div>
</li>
<li> <a herf="javascript:;">第 1 レベルのタイトル 7</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>第 2 レベルのタイトル 777</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し 7</a> </dd>
</dl>
</div>
<div class="サブライト"> </div>
</li>
<li> <a herf="javascript:;">第 1 レベルのタイトル 8</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>第 2 レベルのタイトル 888</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し 8</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:lightseagreen"> </div>
</li>
<li> <a herf="javascript:;">第 1 レベルのタイトル 9</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>第 2 レベルの稱號(hào) 999</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルのタイトル 9</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:mistyrose"> </div>
</li>
<li> <a herf="javascript:;">第 1 レベルのタイトル 10</a> <span></span>
<div class="サブメニュー">
<div class="subleft">
<dl>
<dt>レベル 1010</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> <a href="javascript:;">レベル 3 タイトル</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し< ;/a> </dd>
</dl>
<dl>
<dt>第 2 レベルのタイトル</dt>
<dd> <a href="javascript:;">第 3 レベルの見出し</a> <a href="javascript:;">第 3 レベルの見出し</a> <a href=" javascript:;">第 3 レベルのタイトル 10</a> </dd>
</dl>
</div>
<div class="subright" style="background-color:salmon"> </div>
</li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</本文>
</html>
これは、CSS マウス ホバー屬性を使用して、モール Web サイトで一般的に使用される左側(cè)のカテゴリ ドロップダウン ナビゲーション メニューを作成する比較的単純なコードです。
このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロード サイトによって転載されたものです。ソフトウェアの整合性をご自身で確認(rèn)してください。このサイトのすべてのリソースは學(xué)習(xí)の參考のみを目的としています。商業(yè)目的で使用しないでください。そうでない場(chǎng)合は、すべての結(jié)果に対して責(zé)任を負(fù)うことになります。侵害がある場(chǎng)合は、削除するためにご連絡(luò)ください。連絡(luò)先情報(bào): admin@php.cn
関連記事
ハードコードされた値を使用せずにレスポンシブ CSS3 マーキー効果を作成するにはどうすればよいですか?
06 Dec 2024
CSS3 のマーキー効果: テキスト適応のための特定の値の回避 CSS3 アニメーションでは、多くの場(chǎng)合、テキスト...
CSS3 変換のみを使用してホバー時(shí)の畫像ズーム効果を作成するにはどうすればよいですか?
28 Nov 2024
CSS3 Transform によるホバー時(shí)の CSS 畫像ズーム効果畫像をズームインするホバー効果の作成は、CSS3 の...
CSS3 でフェードアウト効果を?qū)g現(xiàn)する方法: キーフレーム アニメーションとトランジション?
27 Oct 2024
CSS3 トランジション - フェードアウト効果 CSS3 では、キーフレーム アニメーションを使用してフェードアウト効果を?qū)g現(xiàn)できます。しかし、それは...
CSS3 トランジションを使用してフェードアウト効果を作成するにはどうすればよいですか?
28 Oct 2024
CSS3 トランジション: フェードアウト効果の実現(xiàn) CSS3 では、トランジションは動(dòng)的な視覚効果を作成するための強(qiáng)力なツールを提供します。その効果の中には…
ストリップタグ以外の HTML 特殊文字コードを効果的に削除するにはどうすればよいですか?
18 Oct 2024
効果的な HTML 特殊文字の削除:strip_tags を超えた拡張strip_tags は HTML タグを効果的に削除しますが、HTML 特殊文字コードが殘る可能性があります。 「 」や「?」などのコードは、RSS フィード ファイルの保存を中斷する可能性があります。
テキストの長(zhǎng)さを調(diào)整できる動(dòng)的 CSS マーキーを作成するには?
07 Dec 2024
適応可能なテキスト長(zhǎng)を使用して動(dòng)的なマーキー効果を作成する方法 CSS3 でマーキー効果を?qū)g現(xiàn)するにはアニメーションが必要ですが、特定の...
CSS3 トランジションの開始と終了を検出するにはどうすればよいですか?
11 Nov 2024
CSS3 トランジション イベントCSS3 トランジションは、Web ページにアニメーションや効果をシームレスに追加する方法を提供します。ただし、効果的に制御するには...
CSS3 @keyframes を使用したスライドアップ アニメーションが機(jī)能しないのはなぜですか?
28 Oct 2024
CSS3 トランジション - フェードアウト効果 CSS3 を使用すると、フェードアウト効果を簡(jiǎn)単に実裝して、ユーザー エクスペリエンスを向上させることができます。ところが、もし遭遇したら…
古い IE ブラウザで CSS3 効果を模倣するにはどうすればよいですか?
28 Oct 2024
古い IE ブラウザで CSS3 効果の素晴らしさをエミュレートする CSS3 は Web デザインにスタイリッシュな効果を數(shù)多くもたらしますが、次のような従來(lái)のブラウザでは...
ホットツール Tags
ホットツール
CSS テキストがハート型のアニメーション特殊効果に結(jié)合されます
CSS テキストがハート型のアニメーション特殊効果に結(jié)合されます
CSS3 SVG表現(xiàn) 花アニメーション 特殊効果
SS3 SVG 告白フラワーアニメーション特殊効果は、バレンタインデーのアニメーション特殊効果です。
jQuery+CSS3 バレンタインデーの愛(ài)の特殊効果
jQuery+CSS3 バレンタインデーの愛(ài)の特殊効果は、バレンタインデーのぶら下がって揺れるハートのアニメーションの特殊効果です。
CSS3 スプーンですくう もちむすび アニメーション 特殊効果
かわいいもちむすびの表情、もちむすびをすくうスプーンのアニメーション特撮
Bingdundun と Xueronrong を描畫するための純粋な CSS
リアルな氷と雪を描畫するための純粋な CSS 手書きコード。