ここから本文です

CSSでプルダウンメニューを作成したのですが、IEでの表示が異なってしまいます。

dmnss008さん

2009/9/609:26:27

CSSでプルダウンメニューを作成したのですが、IEでの表示が異なってしまいます。

Firefox上で作成したのでFirefoxでは意図通りに表示されています。
どうすればIEでの表示をFirefoxと同じにできるのでしょうか。
ご教示いただけると幸いです。

以下問題部分のHTML、CSSソースです。


[HTML]

<p class="top4_p">
<font class="main_a">
<ul id="menu">
<li><a href="/">Home</a></li>
<li>記事カテゴリ<ul>
<li><a href="#">PSP</a></li>
<li><a href="#">DS</a></li>
</ul></li>
<li><a href="/152.html">About</a></li>
<li><a href="/192.html">相互リンク集</a></li>
<li><a href="/119.html">作成物</a></li>
</ul>
</font>

</p>


[CSS]

p.top4_p{
background:#fff;
text-align:center;
font-size:160%;
padding:5px 0px 10px;
}


.main_a a:link,.main_a a:visited,.main_a a:active{
font-weight:bold;
color:black;
background:#fff;
text-decoration:none;}

.main_a a:hover{
color:tomato;
text-decoration:underline;}


#menu{
padding:0px 0px 0px 20px;
list-style:none;
z-index:1;
}

#menu li {
float:left;
height:1.5em;
z-index:2;
font-size:100%;
list-style:none;
padding:0px 5px;
}

#menu li:hover {
background-color:transparent;
color:tomato;
}

#menu li ul {
list-style:none;
visibility:hidden;
width:1em;
position:relative;
z-index:1;
font-size:70%;
}

#menu li:hover ul {
visibility:visible;
}

#menu li ul li{
}
#menu li ul li a {
background-color:white;
border-color: #000000;
border-style:solid;
border-width:1px;
padding:2px 7px;
}

#menu li ul li a:hover {
background-color:white;
padding:2px 7px;
border-color: #000000;
border-style:solid;
border-width:1px;
}

閲覧数:
2,444
回答数:
1

違反報告

ベストアンサーに選ばれた回答

mercy_sopさん

2009/9/618:05:12

#menu li:hover ul のli:hoverの部分が古いIEでは対応していないようです。
IE7.0以上でドキュメントタイプを「標準準拠モード」にすると表示されました。IE7とIE8では若干見た目が違いましたが。

「標準準拠モード」は以下を使いました
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

質問した人からのコメント

2009/9/6 21:10:34

ご回答ありがとうございます。
おかげさまで無事表示することができました。
たったこれだけで変わってしまうものなんですね。
「標準準拠モード」なんて初めて聞きました。
まだまだ修行が足りないようなのでまた勉強してきます!
このたびはありがとうございました。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。