CSS Webページレイアウト入門チュートリアル14: 垂直ドロップダウンと複数レベルのポップアップメニュー_基本チュートリアル

前のチュートリアルを完了すると、このセクションの学習がはるかに簡単になると思います。
水平メニューは、div と JavaStrict を通じてドロップダウン コントロールを実装します。垂直メニューはどうですか?答えは「はい」です。ここで行う必要があるのは、垂直メニューの CSS コードです:

ul { margin:0; padding:0; list-style:none; width:120px; border-bottom:1px Solid #ccc; font - サイズ:12px;}
ul li { 位置:相対;}
li ul { 位置:絶対; 左:119px; 上:0; 表示:なし;}
ul li a { 幅:108px ; 表示:ブロック; テキスト装飾: なし; カラー:#666666; 背景:#fff; パディング:5px; ボーダー:1px ソリッド #ccc; ボーダーボトム:0px;}
ul li a:hover {background- color :#ddd;}
/*IE で ul が正しく表示されない問題を解決*/
* html ul li { float:left; height:1%;}
* html ul li a { height :1%;}
/* end */
li:hover ul,li.over ul { display:block;}


CSSコードの記述は基本的に水平を維持します。方向 ナビゲーションにも同じ考え方が使用されますが、違いは、相対的な位置を維持しながらナビゲーションとメイン ナビゲーションの間でマウス インタラクションを実現するために、position:relative; for ul li{} を使用して位置決めを行うことです。相対的な位置決めに。 li ul{} の場合、つまり、サブナビゲーションは、position:absolute を使用します。ナビゲーションに対する絶対的な位置決め方法により、マウス操作後の位置の一貫性が保たれます。
おそらく、コメント定義 * html ul li および * html ul li a が CSS コードの最後に追加されていることに気づいたかもしれません。ここで使用されている CSS ハックは、ブラウザーごとにコードの解析方法が異なるため、各ブラウザーで同じ効果を実現するために使用されます。このコードは IE ブラウザでのみ解析でき、他のブラウザは見て見ぬふりをします。
この例の最終的な表示効果は次のとおりです。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title>