div+css を使用してシンプルなドロップダウンメニューを実現しますeffect_html/css

div+css を使用してシンプルなドロップダウンメニューを実現しますeffect_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:28:59

オリジナル

1379 人が閲覧しました

カスタムドロップダウンメニューを実装します。以下を参照してください。CSS はコメント化されています。

スタイル管理に次の CSS を追加し、次の CSS コードをスタイルの下部に直接コピーします。

css code: /* ドロップダウンメニュースタイル*/

*{margin:0;padding:0; border: 0;}
#div_center { width:790px; height:23px; margin-left: auto;margin-right:auto;} /* 全体の幅と高さを定義します。背景色、中央揃え*/
#nav { line-height: 20px; list-style-type: none; margin-top:5px;} /*第 1 レベルのメニューの行の高さを 5px に制御します。 / #nav a { display: block; width: 77px; text-align:center; font-size:12px;} /*第 1 レベルのメニューリンクの全体的なスタイル: 各メニューの幅、中央揃え、テキストサイズ*/ #nav a:link { color: #FFF; text-decoration:none;margin:0;} /* 未訪問のリンク*/
#nav a:visited {color:#FFF;text-decoration:none;margin:0; } /*訪問された色* /
#nav a：hover {color：＃c00; text-decoration：none;}
#nav li a：hover {background：#fffff;} /*マウスはその背景色を変更します。最初のレベルのメニュー*/
#nav li ul {line-height: 24px; リストスタイルタイプ: none;text-align:left; left: -999em; 位置: 絶対;ボーダー幅: 1px;ボーダートップスタイル: なし;ボーダー右スタイル: ソリッド;ボーダーボトムスタイル: ソリッド;ボーダー左スタイル: ソリッド;ボーダーカラー: #003399;} /* セカンダリメニューの全体のスタイル: 行の高さ 24px; 背景フレームの幅; 境界線 1 ピクセル、上部にスタイルなし、境界線の色は 1 ピクセル;

#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px; }セカンダリメニューリンクスタイル; #nav li ul a:visited {color:#。 0d5097;テキスト-decoration:none;} -weight:normal;background:#003399;}/* リンクの上にマウスを置く*/

#nav li:hover ul {left: auto;}

#nav li.sfhover ul {left: auto; }

#content { clear: left;}

テンプレートの表示したい場所に次のコードを挿入します:

DIV コード: