次のような効果を作成したいと思います。ドロップダウン メニューにカーソルを合わせると、ホバーしたリンクが青色になります。もちろんいいのですが、ドロップダウン メニューのリスト項目にカーソルを合わせると、青いリンクが灰色に戻ります。他の何かがホバーされていても、リンクを青色のままにするにはどうすればよいですか?
青でなければならないリンクは、ホバーしないと灰色になります。それは結構です。ホバーすると青です。それも問題ありませんが、メニューのリスト項目に移動すると (灰色のリンクはドロップダウン メニューへのリンクです)、リンクは灰色に戻り、青のままではありません。 ..
コード:
<div id="main-menu-wrap">
<ul id="menu-headmenu" class="menu-headmenu-container">
<li id="menu-item-429" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="blabla">
About us
<span class="sub"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="blablbala">
Team
<span class="sub">blablabla</span>
</a>
</li>
<li id="menu-item-145" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<a href="blablabla">
haha
<span class="sub">hahaa</span>
</a>
</li>
</ul>
</li>
<li id="menu-item-407" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor">
CSS:
#menu-headmenu li a:hover {
background: none repeat scroll 0 0 #80806E;
color: white;
}
#menu-headmenu li li a:hover {
background: none repeat scroll 0 0 transparent;
}
#menu-headmenu li:hover .sub-menu {
display: block;
}
#menu-headmenu .sub-menu li {
background: none repeat scroll 0 0 white;
float: none;
font-size: 14px;
margin-bottom: 1px;
padding: 10px;
text-transform: uppercase;
width: 200px;
}