< ;html xmlns="http://www.w3.org/1999/xhtml">纯div+cssの黄色二级导航菜单<br>/* 共通のスタイル */<br>/* セットアップメニュー div、フォント、マージンの全体の幅 */<br>.menu {<br>font-family: arial, sans-serif; <br>幅:750ピクセル; <br>マージン:0; <br>margin:50px 0;<br>}<br>/* 箇条書きを削除し、順序なしリストのマージンとパディングをゼロに設定します */<br>.menu ul {<br>padding:0; <br>margin:0;<br>list-style-type: none;<br>}<br>/* 項目が行内に配置され、ドロップダウン リストが各リスト項目の下の適切な場所に表示されるように相対的な位置になるようにリストをフローティングします。 */<br>.menu ul li {<br>float:left; <br>position:relative;<br>}<br>/* リンクのスタイルを幅 104 ピクセル、高さ 30 ピクセル、上部と右側の境界線を 1 ピクセルの白一色にします。背景色と文字サイズを設定します。 */<br>.menu ul li a, .menu ul li a:visited {<br>display:block; <br>text-align:center; <br>テキスト装飾:なし; <br>幅:104ピクセル; <br>高さ:30ピクセル; <br>色:#000; <br>border:1px ソリッド #fff;<br>border-width:1px 1px 0 0;<br>background:#c9c9a7; <br>行の高さ:30px; <br>font-size:11px;<br>}<br>/* ドロップダウンを非表示にする */<br>.menu ul li ul {<br>display: none;<br>}<br>/* IE 以外のブラウザに固有 */<br>/* 背景を設定し、メインメニューの前景色 li on hover */<br>.menu ul li:hover a {<br>color:#fff; <br>background:#b3ab79;<br>}<br>/* サブメニューを ul 表示し、メインメニューのリスト項目の下に配置します */<br>.menu ul li:hover ul {<br>display:block; <br>位置:絶対; <br>トップ:31ピクセル; <br>左:0; <br>width:105px;<br>}<br>/* サブメニュー リンクの背景色と前景色のスタイルを設定します */<br>.menu ul li:hover ul li a {<br>display:block; <br>背景:#faeec7; <br>color:#000;<br>}<br>/* ホバー時のリンクの背景色と前景色のスタイルを設定します */<br>.menu ul li:hover ul li a:hover {<br>background:#dfc184; <br>color:#000;<br>}<br>< ul>デモ< ;!--[IE 6 の場合]>デモ<表> ゼロドル テキストを折り返す スタイル付きフォーム アクティブ フォーカス シャドウ ボクシング 楽しい背景 フェード スクロール 全サイズの画像 メニュー スパイ メニュー 垂直メニュー リストの拡大 リンク画像 非長方形< /a> ジグソー リンク 循環リンク< ;/li> レイアウト 固定 1 固定 2 固定 3 固定 4< ;/li> minimum width BOXES スパイ メニュー 垂直メニュー リストの拡大 リンク画像 < ;a href="http://eiker666.blog.163.com/blog/cross.html" title="非長方形リンク">非長方形 ジグソー リンク < a href="http://eiker666.blog.163.com/blog/circles.html" title="循環リンク">循環リンク < !--[IE 6 の場合]> MOZILLAMOZILLA< tr> ドロップダウン メニュー カスケード メニュー content: mozzie ボックス < ;a href="http://eiker666.blog.163.com/blog/../mozilla/rainbow.html" title="虹を架けることができます">虹ボックス スヌーカー キュー< /li> ターゲットの実践 2 トーンの見出し< ;/li> シャドウ テキスト EXPLORER 例 1 横糸フォント < ;a href="http://eiker666.blog.163.com/blog/../ie/exampletwo.html" title="垂直方向の配置">垂直方向の配置 < /ul> 不透明度 不透明色 不透明メニュー 部分的な不透明度 部分不透明度 II < /li>
