クリックしたときにメイン メニュー リスト項目が選択されたままになるように CSS を変更するにはどうすればよいですか? ホバー時に背景色を変更できますが、クリックしたときに他のものをクリックするまで背景色を変更したいと思います。私のサブメニューは、ホバーではなくクリックで表示されます。これが、ホバーが機能しない理由です。
たとえば、www.IBM.com では、メイン メニューで選択したリスト項目のスタイルは、ホバー時だけでなくクリック時にも変化します。
ここに私が持っているものがあります:
<div class="header">
<ul class="site-nav">
<li class="first">
<a href="#">Home</a>
</li>
<li>
<div class="quick-more">
<a class="drop-link">Support</a>
<ul class="dropdown" style="display: block;">
......etc.
<li>Community</li>
<li>Contact</li>
</ul>
</div>
私のCSSには、次のものがあります。
.site-nav {
background: #1f78c3;
}
.site-nav .dropdown {
background: #fff;
padding: 0;
border: 0;
}
.site-nav li a:hover{
background: #fff;
color: #1f78c3;
}
a:visited と a:target も試しましたが、どちらもうまくいきませんでした。私が見逃しているもののアイデアはありますか?