現在位置：ホームページ > ダウンロード > JS効果 > CSS3特殊効果 > CSS ショッピングモール Web サイトでは、左側のカテゴリのドロップダウンナビゲーションメニューコードが一般的に使用されます。

CSS ショッピングモール Web サイトでは、左側のカテゴリのドロップダウンナビゲーションメニューコードが一般的に使用されます。

分類する: JS効果 / CSS3特殊効果	リリース時間: 2017-12-23	訪問: 28878
ダウンロード: 73

クリックしてダウンロードプレビュー効果

詳細>

最新のダウンロード

ファンタジー水族館

『ファンタジーアクアリウム』は、神秘的な海中世界を冒険するファンタジーアドベンチャーゲームです。この想像力豊かな水族館で、プレイヤーは水族館の管理者および専門家の役割を果たします。

0 2024-05-08

『ドールズフロントライン』はSUNBORN Gamesが開発した戦略ロールプレイングゲームです。この未来の世界では、人間とロボット少女が戦います。あなたは指揮官として、ユニークなロボット少女軍団を率いて、スリリングな戦いを繰り広げます。ゲームの特徴: ロボット少女の巨大なキャンプ: さまざまなスタイルや能力を持つロボット少女を集めて訓練し、自分だけの最強のチームを構築します。綿密なプロット設定: ロボット少女たちとコミュニケーションを取り、物語の背景をより深く理解し、戦闘中に彼女たちをサポートし、励まします。精緻な戦闘グラフィック：華麗な戦闘シーンを楽しめる

832 2024-05-06

星の翼

「Star Wings」は、メカガール要素と古典的な GVG 格闘ゲームプレイを完璧に組み合わせた 3D 対戦ゲームです。ゲームでは、プレイヤーは強力な戦闘力を持つメカ少女を操作し、エキサイティングな戦場で1対1、2対2の熾烈な戦いを繰り広げ、他にはない競技の魅力を感じていきます。高精度3Dモデリング技術を採用し、美麗なグラフィックを表現しています。それぞれのメカが個性的で、テクノロジーが詰まったメカ構造や少女の優美な姿が繊細に描かれており、まるで手のひらの上で活躍する超大作アニメのようです。美少女パイロットたちはそれぞれに魅力があり、その個性が声や行動で表れます。

521 2024-05-06

小さな花の妖精フェアリーパラダイス

「小さな花の妖精妖精の楽園」は、子供のような楽しさと魔法に満ちたカジュアルゲームで、大多数のプレイヤーに素晴らしいゲーム体験をもたらします。ゲームでは、あなたは小さな花の妖精の役割を果たし、他のプレイヤーと一緒にエルフの楽園に入り、驚きに満ちた冒険に乗り出します。ゲームの特徴: 新しい魔法の冒険: より精緻なグラフィックで新しいエルフパラダイスの冒険をお楽しみください。絶妙なゲームグラフィックス: このゲームは最新の 3D テクノロジーを使用して美しいゲームグラフィックスを作成し、プレイヤーにまったく新しい視覚的な衝撃を与えます。さまざまなアクティビティ: ゲームでは、プレーヤーはさまざまなアクティビティに参加し、多数のゲーム報酬を獲得できます。リッチ

703 2024-05-06

レストランキュートストーリー

「レストランキュートストーリー」は、かわいいレストラン経営シミュレーションゲームです。このゲームでは、あなたはレストランの若いオーナーとなって、かわいいお客さんたちを迎え入れて、ユニークで賑やかなレストランを作り上げていきます。ゲームの特徴: かわいい動物の顧客: ゲームにはさまざまなかわいい動物のキャラクターがいて、それぞれの好みやニーズに合わせて最適な料理を提供する必要があります。レストランをカスタマイズする: 装飾から家具に至るまで、自分の好みと創造性に従ってユニークなレストランを作成し、より多くの顧客を引きつけることができます。多彩なメニュー：ゲーム内

574 2024-05-05

山河旅行探訪

「山河旅探偵」ゲーム紹介「山河旅探偵」は、中国風の推理・調査ゲームで、魅力的なストーリー展開が特徴です。このゲームは、伝統的な中国文化要素と古典的な推理や調査のゲームプレイを巧みに組み合わせており、プレイヤーに謎と驚きに満ちたゲーム世界を提供します。ゲームでは、プレイヤーは才能のある若い探偵の役割を果たし、山や川を旅してさまざまな複雑で混乱する事件を調査します。それぞれの事件は慎重に設計されており、サスペンスと挑戦に満ちています。プレイヤーは知恵と観察を駆使して手がかりを集め、真実を推理する必要があります。このゲームは、美しい中国のスタイルを採用し、古代中国の要素を組み合わせたユニークなグラフィックスタイルを持っています。

946 2024-05-05

「愛とプロデューサー」

「恋とプロデューサー」はエレックスが開発した女性向け恋愛育成型ゲームです。このゲームでは、あなたはプロデューサーとなり、4 人の個性的な男性主人公とともにロマンチックな旅に乗り出します。ゲームの特徴: 実在の人物による吹き替えで、最も現実的なプロット体験を復元します。豊かなゲームプロットと感情の起伏に富んだストーリーがあなたをゲームに没入させます。 AR ゲームの動作を完全に復元し、ゲームをより快適に楽しむことができます。ユニークなゲームプレイにより、主人公をより深く理解し、異なる種類の愛を体験できます。タスクやアクティビティを通じて小道具を獲得し、それらを使用してヒーローの属性を向上させます。

519 2024-05-04

最強の頭脳 3

「The Biggest Brain 3」は、あなたの脳の限界に挑戦し、知恵とスキルを披露する、エキサイティングで興味深い知的競争ゲームです。このゲームでは、プレイヤーは解読、推論、記憶、その他のトピックを含むさまざまな精神的な課題に直面するため、頭脳は総合的に鍛えられます。ゲームの特徴: 解読、推理、記憶などの分野をカバーする多様なチャレンジテーマで、飽きることなく楽しめます。豊富なレベルデザイン、徐々に難易度が上がり、IQの限界に挑戦します。シングルプレイヤーチャレンジやマルチプレイヤーバトルなど、さまざまなゲームモードが利用可能で、友達と IQ を競うことができます。絶妙な映像デザインと音響効果が生み出す、

869 2024-05-04

オッドダスト：ダミラ

『アース：ダミラ』ゲーム紹介『アース：ダミラ』は、魅力的なフル3DエイリアンライトSFオタクタワーディフェンスゲームです。このゲームでは、プレイヤーはアトゥム号の船長となり、人類の希望を継承するという重要な使命を担い、生命力と生命力に満ちた「生まれたばかりの」少女たちを率いて、謎の惑星ダミラに足を踏み入れて探索します。この緑の異星のすべて。ユニークな SF 設定と絶妙な 3D グラフィックスを備えたこのゲームは、プレイヤーに未知と挑戦に満ちた異質な世界を提示します。この神秘的な土地で、プレイヤーは少女たちを率いて、エイリアンの星からの脅威に対抗するための強力な防御を構築する必要があります。

254 2024-05-03

若き西遊記2

『西遊記 2』ゲーム紹介『西遊記 2』の世界に足を踏み入れると、オリエンタルな魅力に満ちた壮大で幻想的なインダストリアルパンクアドベンチャーが始まります。ジュブナイルカードシリーズの最新傑作として、このゲームはパンクスタイルと国家トレンドの要素を完璧に融合させ、プレイヤーにこれまでにない西遊記の世界を提供します。まず、ゲームのスタイルが独特です。デザイナーは、伝統的な中国絵画や版画の技術と現代のパンク要素を巧みに組み合わせ、すべてのキャラクターとすべてのシーンを強い東洋の魅力と前衛的なパンクの雰囲気に満ちたものにしました。プレイヤーは、古典と現代、東洋と西洋が融合した世界にいるようです。

951 2024-05-03

24時間リーダーボードの閲覧

詳細>

最新のチュートリアル

[Web フロントエンド] Node.js クイックスタート

海外のWeb開発フルスタックコースの完全なコレクション

1645 2024-04-24
Go言語実践GraphQL

1920 2024-04-19
550W ファンマスターが JavaScript をゼロから段階的に学習します

3340 2024-04-18
Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

2872 2024-04-10
MySQL 入門 (教師モッシュ)

1749 2024-04-07
Mock.js | Axios.js | Json | Ajax -- 10 日間の質の高いクラス

2558 2024-03-29

CSS ショッピングモール Web サイトでは、左側のカテゴリのドロップダウンナビゲーションメニューコードが一般的に使用されます。

<!doctype html>
<html lang="ja">
<頭>
<メタ文字セット="UTF-8">
<title>商城网站常用左侧分类下拉导航菜单代码</title>

<スタイル>
* {マージン: 0;パディング: 0; }
ボディ { マージン: 0;パディング: 0;テキスト装飾: なし。フォントサイズ: 14px; }
li { リストスタイル: なし; }
.menu {幅: 1000ピクセル;高さ: 600ピクセル;マージン: 30px 自動;背景色: #ececec; }
.menu .menuTop { 背景色: #F10215;色: #fff;幅: 140ピクセル;高さ: 40ピクセル;パディング左: 20px;行の高さ: 40px;カーソル: ポインタ; }
.menu ul {幅: 160px;背景色: #fff;境界線: 2 ピクセルの実線 #F10215;ボックスのサイズ設定: ボーダーボックス;位置: 相対的; }
.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 レベルの称号 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 サイトで一般的に使用される左側のカテゴリドロップダウンナビゲーションメニューを作成する比較的単純なコードです。

このウェブサイトの声明

当サイトのすべてのリソースはネットユーザーが投稿したり、各ダウンロードステーションを転載したりしているので、ソフトウェアの完全性を自分でチェックしてください！当サイトのすべてのリソースは学習と参考のためだけに使用されます。ビジネス用途には使用しないでください。そうしないと、発生したすべての結果はあなた自身が負担します！権利侵害がある場合は、次の連絡先に連絡してください。admin@php.cn