css definition issue

Hello all,
I have a problem with defining a class for particular <a>
If you look at this page (http://www.europeoples.eu/), you will see the menu. If you hover a word and go down along the drop down, then the color for the <a> reverts to browser default, something which does not happen if you over the word and then go straight to another without going down along the drop.. you see what I mean?

Maybe it is an issue with the javascript.... When I applied the a:hover to the whole list, such issue did not appear...

I hope someone of you understand the issue :-)

here is the html:
<div id="menu_bar">
<ul id="menu">
<li><a class="men_grey" href="#">Home</a>

<ul>
<li><a href="#">home page</a></li>
<li><a href="#">about site</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">contact</a></li>
</ul>

</li>
<li><a class="men_black" href="#">hello</a>

<ul>
<li><a href="#">log in</a></li>
<li><a href="#">post query</a></li>
<li><a href="#">register</a></li>
<li><a href="#">search offers</a></li>
</ul>

</li>
<li><a class="men_black" href="#">hello</a>

<ul>
<li><a href="#">log in </a></li>
<li><a href="#">register </a></li>
<li><a href="#">post offer</a></li>
<li><a href="#">bulk upload </a></li>
</ul>

</li>
<li><a class="men_grey" href="#">hello</a>

<ul>
<li><a href="#">search guide</a></li>
<li><a href="#">leave comment</a></li>
<li><a href="#">all year long </a></li>
</ul>

</li>
</ul>
</div>

here is the css:

#menu_bar
{
background: transparent url("");
height: 45px;
}
#menu {margin-left:250px;}

#menu li {
float: left;
display: block;
font-size: 10pt;
padding: 1px 13px 0px 0;
width:120px;
}
#menu li a {
padding: 4px 0px;
display: block;
font-weight: bold;
text-align:center;
}


#menu li ul {
left : -999em;
position : absolute;
padding-bottom:12px;
padding-top:6px;
padding-left:0px;
z-index:950;
background:transparent url("") no-repeat scroll 0 bottom;
}

#menu li ul li { float : none; margin-left:6px;}

#menu li ul a {
width : 100px;
padding-left:10px;
font-weight : normal;
padding-bottom:1px;
padding-top:2px;
text-align:left;
color:grey;
}

#menu li ul a:hover {
color: orange;
border-bottom: 1px solid #C9C9C9;
border-top: 1px solid #C9C9C9;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
visibility: visible; /*IE fix for stickiness*/
}

a.men_grey, a.men_grey:visited
{
color:grey;
}

a.men_grey:hover, a.men_grey:active
{
color: orange;
}

a.men_black, a.men_black:visited
{
color:black;
}

a.men_black:hover, a.men_black:active
{
color: orange;
}

Thanks a lot for having a look,
Michael

Anything to do with http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.europeoples.eu%2F&profile=css21&usermedium=all&warning=1&lang=en ?

thanks for reminding me to validate abdu ;-)
It seems to validate now but the issue is still there...

Um.. it's you javascript, which replaces the default class attribute values with null on mouseout.

For making a drop down, use the javascript given at http://htmldog.com/articles/suckerfish/dropdowns/, which targets IE only.

I'm using such javascript (suckerfish), and it was working well if I applied a color to the whole <li><a>
#menu li a {
padding: 4px 0px;
display: block;
font-weight: bold;
text-align:center;
}
but when I removed that color from there and instead defined a new class, such as below, it stopped working properly.
a.men_grey, a.men_grey:visited
{
color:#BBBBBB;
}

a.men_grey:hover, a.men_grey:active
{
color: orange;
}

Probably a javascript problem indeed. I shall post overthere, thanks.

I'm using such javascript (suckerfish), and it was working well if I applied a color to the whole <li><a>
http://htmldog.com/articles/suckerfish/dropdowns/ has
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover); only where as you have a lot of unwanted(not required for that drop down) scripts

I will look at what you are referring to just now. I fixed the issue by adding the class to the <li> rather than straight <a>:
css
li.men_grey a
{
color: #919191;
}
li.men_black a
{
color: #656565;
}

html
<li class="men_grey"><a href="#">Home</a>

<ul>
<li><a href="#">home page</a></li>
<li><a href="#">about site</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">contact</a></li>
</ul>

</li>