Question

I want to create an effect, which is as follows: If I hover on my dropdown menu, the 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?

So this is the normal state. No hovers, no whatsoever. It is gray and that is fine. If I hover for example FAQ, then it will turn blue. That is ok too… But now. If I hover over FAQ, I will get a dropdown list. Then, if I hover over a list item, the FAQ message, which was blue, gets GREY. I want it to stay BLUE.

As said.. I want to get FAQ colored blue. I guess this has something to do with parent classes or active states? How can I do this? This is my 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">
faq
<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">
no
<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">
<a href="blablablabla">
blablbala
<span class="sub"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom">
</ul>
</div>

CSS:

#main-menu-wrap {
    position: absolute;
    top: 150px;
    z-index: 9999;
}

#menu-headmenu li .sub-menu {
    border-top: 15px solid #80806E;
    display: none;
    position: absolute;
    z-index: 9999;
}
.home #menu-headmenu li a:hover {
    background: none repeat scroll 0 0 black;
    color: #1CBBED;
}
.home #menu-headmenu li li a:hover {
    background: none repeat scroll 0 0 transparent;
}
#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;

Answer 1

Given your code, replace this rule:

#menu-headmenu li a:hover {
    background: none repeat scroll 0 0 #80806E;
    color: white;
}

with:

#menu-headmenu li a:hover, #menu-headmenu li:hover a {
    background: none repeat scroll 0 0 #80806E;
    color: white;
}

Demo