IE ブラウザを使用しています

バージョン7

バージョン 5.0

バージョン 6

次のコードは、IE 以外のブラウザで実行される条件付きコメントです

Internet Explorer を使用していません

最終的には非 IE で動作します。特別な IE ブラウザ
(または、lte lt または gt gte を使用して判断します。

).

Internet Explorer バージョン 6 を使用しています

またはIE 以外のブラウザ

出典: cssplay.co.uk/menu/conditional.html" target="_blank"> http://www.cssplay.co.uk/menu/conditional.html

上記の条件付きコメントは、ブラウザの種類を判断し、どのブラウザにどのコンテンツが表示されるかを定義します。
このドロップメニュー (ドロップダウン メニュー) モデルは cssplay から来ており、作者が多くの研究とテストを繰り返した後に作成したもので、条件付きコメントの原理を実践するためにこのモデルを使用したいと考えています。

先見の最も完璧なモデル

次は xhtm



CSS



デュアル スタイルを使用して、ie と非 ie のスタイルをそれぞれ定義します。IE を使用する場合は、final_drop.css に基づきます。 Final_drop_ie.css を追加します。

まず、非 IE での CSS がどのように定義されているかを確認します。
.menu ul li ul {
display: none;
}
/* 非 IE に固有IE ブラウザ */
.menu ul li:hover a {
color:#fff;
background:#bd8d5e;
}
/*マウスオーバー スタイルの定義*/
.menu ul li:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width :150px;
}


非 IE では、マウスをロールオーバーすると、li に含まれる ul が表示されます。これは、これらのブラウザが li:hover の使用をサポートしているためです。

.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
/*マウスをロールオーバーすると li に含まれる ul が表示されます*/ .menu ul li a:hover ul {
display:block;
position:absolute;
top:3em;
left:0;
background:#fff;
margin-top:0;
marg\in-top:1px;
}

上記のfinal_drop.cssスタイルを継承すると、liに含まれるulはマウスがない場合には表示されなくなります。時間
なぜなら、

つまり、IE6 でマウスをロールオーバーすると、は、a:hover を通じて表示されます。ul コンテンツは、IE7 では、li:hover を通じて
同じ効果を表示します。