純粋な div+css セカンダリナビゲーション menu_html/css_WEB-ITnose

纯div+cssの黄色二级导航菜单 /* 共通のスタイル */ /* セットアップメニュー div、フォント、マージンの全体の幅 */ .menu { font-family: arial, sans-serif; 幅:750ピクセル; マージン:0; margin:50px 0; } /* 箇条書きを削除し、順序なしリストのマージンとパディングをゼロに設定します */ .menu ul { padding:0; margin:0; list-style-type: none; } /* 項目が行内に配置され、ドロップダウン リストが各リスト項目の下の適切な場所に表示されるように相対的な位置になるようにリストをフローティングします。 */ .menu ul li { float:left; position:relative; } /* リンクのスタイルを幅 104 ピクセル、高さ 30 ピクセル、上部と右側の境界線を 1 ピクセルの白一色にします。背景色と文字サイズを設定します。 */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; テキスト装飾:なし; 幅:104ピクセル; 高さ:30ピクセル; 色:#000; border:1px ソリッド #fff; border-width:1px 1px 0 0; background:#c9c9a7; 行の高さ:30px; font-size:11px; } /* ドロップダウンを非表示にする */ .menu ul li ul { display: none; } /* IE 以外のブラウザに固有 */ /* 背景を設定し、メインメニューの前景色 li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* サブメニューを ul 表示し、メインメニューのリスト項目の下に配置します */ .menu ul li:hover ul { display:block; 位置:絶対; トップ:31ピクセル; 左:0; width:105px; } /* サブメニュー リンクの背景色と前景色のスタイルを設定します */ .menu ul li:hover ul li a { display:block; 背景:#faeec7; color:#000; } /* ホバー時のリンクの背景色と前景色のスタイルを設定します */ .menu ul li:hover ul li a:hover { background:#dfc184; color:#000; } /* Internet Explorer IE5 に固有のスタイル.5とIE6。 IE7 が li:hover を処理するかどうかはまだ確認していません */ /* デフォルトのテーブル スタイルをすべて削除します */ table { border-collapse:collapse; margin:0; padding:0; } /* 「他のブラウザ」で使用されているリンクを無視します */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /*ホバー時のメイン メニュー リンクの背景色と前景色を設定します */ .menu ul li a:hover { color:#fff; background:#b3ab79; } /* サブメニューを ul 表示し、メインメニューのリスト項目の下に配置します */ .menu ul li a:hover ul { display:block; 位置:絶対; トップ:32ピクセル; 左:0; width:105px; } /* サブメニュー リンクの背景色と前景色のスタイルを設定します */ .menu ul li a:hover ul li a { background:#faeec7; color:#000; } /* ホバー時のリンクの背景色と前景色のスタイルを設定します */ .menu ul li a:hover ul li a:hover { background:#dfc184; color:#000; } デモ &lt ;!--[IE 6 の場合]> デモ ゼロドル テキストを折り返す スタイル付きフォーム アクティブ フォーカス シャドウ ボクシング イメージマップ 楽しい背景 フェード スクロール 全サイズの画像 メニュー メニュー スパイ メニュー 垂直メニュー リストの拡大 リンク画像 非長方形 ジグソー リンク 循環リンク レイアウト レイアウト 固定 1 固定 2 固定 3 固定 4 minimum width BOXES BOXES スパイ メニュー 垂直メニュー リストの拡大 リンク画像 非長方形 ジグソー リンク 循環リンク MOZILLA MOZILLA ドロップダウン メニュー カスケード メニュー content: mozzie ボックス 虹ボックス スヌーカー キュー ターゲットの実践 2 トーンの見出し シャドウ テキスト EXPLORER EXPLORER 例 1 横糸フォント 垂直方向の配置 不透明度 不透明度 不透明色 不透明メニュー 部分的な不透明度 部分不透明度 II

純粋な div+css セカンダリ ナビゲーション menu_html/css_WEB-ITnose

関連記事

純粋な div+css セカンダリナビゲーション menu_html/css_WEB-ITnose