Question

I want to create an effect, which is as follows: If I hover on my dropdown menu, the hovered link is colored blue. Nice of course, but if I hover any list item in the dropdown menu, the blue link is going back to gray. How can I make the link stay blue, even if something else is hovered?

The link that has to be blue, is gray if I don’t hover it or something else. That is fine. If I hover it, it is blue. That is fine too, but if I go to a list item in the menu (so the gray link is the link to a dropdown menu), the link is going back to gray and not staying blue, when it was that color if hovered…

Code:

<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;
}

Answer 1

What you want to do can’t be done without JavaScript, as there simply is no such thing as an element:hoveredinpast pseudoselector. A quick jQuery example would be something like:

$('#menu-headmenu .sub-menu li').hover({
    $(this).addClass('PermaBlue');
});

So long as you have a CSS class called PermaBlue with something like color: blue set, this will do what you want.