純粋な DIV+CSS (JS なし) で作成されたドロップダウンメニュー、第 2 レベルのドロップダウンメニュー、第 3 レベルのドロップダウンメニュー_html/css_WEB-ITnose

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> dropdown? /* common styling */ .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} .menu ul li:hover ul li:hover ul.left {left:-105px;} .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} .menu ul li a:hover ul li a:hover ul.left {left:-105px;} DEMOS DEMOS zero dollars wrapping text styled form active focus HOVER/CLICK > HOVER/CLICK > styled form active focus ホバー/クリック シャドウ ボクシング イメージ マップ 楽しい背景 フェード スクロール メニュー MENUS スパイ メニュー 垂直メニュー リストの拡大 リンク画像 非長方形 ジグソー リンク 循環リンク

レイアウト レイアウト 固定 1 固定 2 固定 3 固定 4 最小幅 ボックス ボックス スパイ メニュー 垂直メニュー リストの拡大 リンク画像 非長方形 ジグソー リンク 循環リンク MOZILLA MOZILLA ドロップダウン メニュー カスケード メニュー content: mozzie ボックス スヌーカー キュー ターゲットの実践 2 トーンの見出し シャドウ テキスト EXPLORER EXPLORER 横糸フォント 垂直方向の整列 OPACITY OPACITY opaque colours opaque menu partial opacity partial opacity II styled form active focus hover/click

webjx.com .menu { フォントファミリー: ベルダナ、サンセリフ; 幅:750ピクセル; 位置:相対的; font-size:0.85em; padding-bottom:250px; } .menu ul { padding:0; margin:0; list-style-type: none; } .menu ul li { float:left; position:relative; } .menu ul li a, .menu ul li a:visited { 表示ブロック; テキスト装飾: なし; カラー:#000; 幅:139ピクセル; 高さ:3em; カラー:#000; ボーダー:1px ソリッド #fff; ボーダー幅:1px 1px 0 0; 背景:#dfc184; padding-left:10px; line-height:3em; } * html .menu ul li a, .menu ul li a:visited { width:149px; width:139px; } .menu ul li ul { 表示: none; } テーブル { margin:-1px; border-collapse:collapse; font-size:1em; }

/* IE 以外のブラウザーに固有 */ .menu ul li:hover a { color:#fff; 背景:#bd8d5e; } .menu ul li:hover ul { display:block; 位置:絶対; 上:3em; マージン-上:1px; 左:0; width:150px; } .menu ul li:hover ul li ul { display: none; } .menu ul li:hover ul li a { display:block; 背景:#faeec7; 色:#000; 高さ:自動; 行の高さ:1.2em; パディング:5px 10px; width:129px } .menu ul li:hover ul li a.drop { background:#c9c9a7; } .menu ul li:hover ul li a:hover { background:#c9c9a7; color:#000; } .menu ul li:hover ul li:hover ul { display:block; 位置:絶対; 左:150ピクセル; top:0; width:150px; } .menu ul li:hover ul li:hover ul.left { left:-150px; }

.menu ul li a:hover { color:#fff; 背景:#bd8d5e; } .menu ul li a:hover ul { display:block; 位置:絶対; 上:3em; 左:0; 背景:#fff; margin-top:0; margin-top:1px; } .menu ul li a:hover ul li a { display:block; 背景:#dbe4ab; カラー:#000; 高さ:自動; 行の高さ:1.5em; パディング:5px 10px; width:150px; width:129px; } .menu ul li a:hover ul li a.drop { background:#c9c9a7; } .menu ul li a:hover ul li a ul { Visibility:隠れた; 位置:絶対; 高さ:0; width:0; } .menu ul li a:hover ul li a:hover { 背景:#c9c9a7; color:#000; } .menu ul li a:hover ul li a:hover ul { Visibility:visible; 位置:絶対; トップ:0; color:#000; left:150px; } .menu ul li a:hover ul li a:hover ul.left { left:-150px; }

ゼロドル広告ページ 画像の周囲にテキストを折り返す スタイル付きフォーム アクティブ フォーカス 境界線なしでホバー/クリック

スタイル付きフォーム アクティブ/フォーカスの境界線を削除する ホバー/クリック

シャドウ ボクシング 詳細情報のイメージ マップ 背景画像で楽しむ フェード スクロール 全画像サイズを比較

<!--<![endif]--&gt ;

コード化されたスパイのリスト 垂直メニュー 順序なしリストの拡大 リンク画像 非長方形 ジグソー リンク 循環リンク

&lt ;/a>

&lt ;!--[IE 7 の場合]>

ドロップダウン メニュー カスケード メニュー content: モジー ボックス 透明な境界線で虹を作ることができます ボーダー アートを使用したスヌーカー キュー ターゲットの実践 2 トーンの見出し シャドウ テキスト

Internet Explorer の最初の例 横糸フォント テキストを垂直方向に配置

不透明な色を使用したカラー ホイール 不透明度を使用するメニュー 部分不透明度 部分不透明度 II </li&gt ;

ホバー/クリック

スタイル付きフォーム アクティブ/フォーカスの境界線を削除する ホバー/クリック

</html&gt ;

純粋な DIV+CSS (JS なし) で作成されたドロップダウン メニュー、第 2 レベルのドロップダウン メニュー、第 3 レベルのドロップダウン メニュー_html/css_WEB-ITnose

関連記事

純粋な DIV+CSS (JS なし) で作成されたドロップダウンメニュー、第 2 レベルのドロップダウンメニュー、第 3 レベルのドロップダウンメニュー_html/css_WEB-ITnose