cssでの擬似リンク(a:hover)の複数指定
cssでidに囲まれた範囲で複数リンクカラーを指定したいのですが、擬似リンク(a:hover)はうまく表現出来るのですが、その他のリンクの色の指定がうkまく行きません。
FireFoxでは、きちんとスタイルが適用されるのですが、Ie6やNetScape7だと、a, a:link, a:visitedの文字色のスタイルが効かなくなります。どうしたらうまくできるのか教えてください。
■css
/* menu-1 */
#menu-1 {
width: 200px;
height: auto;
margin: 0;
padding:0;
}
#menu-1 ul.support,
#menu-1 li.support {
margin: 0;
padding: 0;
list-style: none;
}
#menu-1 li.support {
width: auto;
height: auto;
padding: 5px 10px;
}
#menu-1 a,
#menu-1 a:link,
#menu-1 a:visited {
padding: 0.2em 10px;
height:1.4me;
color: #ff0000;
text-decoration: none;
}
#menu-1 a:hover {
color: #9f0f0f;
text-decoration: underline;
}
/* menu-2 */
#menu-2 {
width: 200px;
height: auto;
}
#menu-2 ul,
#menu li.list1,
#menu li.list2 {
margin: 0;
padding: 0;
list-style: none;
}
#menu-2 ul li.list1,
#menu-2 ul li.list2 {
width: auto;
height: auto;
}
#menu-2 ul li.list1 {
font-weight: bold;
}
#menu-2 .list1 a,
#menu-2 .list1 a:link,
#menu .list1-s a:visited {
text-decoration: none;
color: #0e2159;
}
#menu-2 .list1 a:hover {
color: #9f0f0f;
text-decoration: underline;
}
#menu-2 li.list2 a,
#menu-2 li.list2 a:link,
#menu li.list2-s a:visited {
text-decoration: none;
color: #000000;
}
#menu-2 li.list2 a:hover {
color: #9f0f0f;
text-decoration: underline;
}
■html
<div id="menu-1">
<a href="#">
<ul>
<li class="support">テスト</il>
</ul>
</a></div>
<div id="menu-2">
<a href="#">
<ul>
<li class="list1">スタイル1</il>
<li class="list2">スタイル2</il>
</ul>
</a></div>
お礼
回答ありがとうございました。無事できました!CSSは自由度が高いんですね。