ホームページ > 記事 > ウェブフロントエンド > div+css を使用してシンプルなドロップダウン メニューを実現しますeffect_html/css_WEB-ITnose
div+css を使用してシンプルなドロップダウン メニューを実現しますeffect_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:28:591423ブラウズ
カスタム ドロップダウン メニューを実装します。以下を参照してください。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;}
#content { clear: left;}
テンプレートの表示したい場所に次のコードを挿入します:
上記の接続アドレスは私自身が変更したものです。
達成される効果は次のとおりです:
レンダリング
とても簡単ですね!
追加します。IE でテンプレート全体を中央に配置したい場合は、テンプレートの先頭に次のコードを追加する必要があります。Firefox では追加する必要はありませんが、IE では追加する必要があります。 :
補足コード