Mi código no tiene ninguna ciencia, creo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HTML>
<HEAD>
<STYLE type="text/css">
BODY{
background:white;
}
.contenedor{
width:932px;
height:1024px;
margin-left:-466px;
position:absolute;
top: 0px;
left:50%;
}
.cajabarra{
width:300px;
height:30px;
margin:305px 0px 0px 54px;
padding-top:10px;
position:absolute;
}
#menu{
list-style:none;
margin:0px 0px 0px 10px;
padding:0px;
}
#menu li{
margin:-2px 4px 0px 0px;
padding:0px;
float:left;
}
#menu li a.enlace{
height:21px;
font-family: arial, helvetica, san serif;
font-size:8pt;
color:#CCCCCC;
font-weight:bold;
text-decoration:none;
vertical-align: middle;
display: table-cell;
}
#menu li a.enlace:hover{
background-color: transparent;
font-weight:bold;
color:#FF0000;
text-decoration:none;
vertical-align : middle;
display: table-cell;
}
#menu li.rojo{
height:21px;
font-family: arial, helvetica, san serif;
font-size:8pt;
color:#FF0000;
font-weight:bold;
vertical-align: middle;
display: table-cell;
padding-top:3px;
}
</style>
</HEAD>
<body>
<div class="contenedor">
<div class="cajabarra">
<ul id="menu">
<li class="rojo">PROFILE</li>
<li><a href="#" class="enlace">GALLERY</a></li>
<li><a href="#" class="enlace">LINKS</a></li>
</ul>
</div>
</div>
</body>
</HTML> Si lo copias y lo pegas verás que la clase "rojo" aunque tiene el mismo color que el .hover, en FireFox se ve azul (¿?)
Pero lo mejor de todo es que ésto sólo sucede con el color rojo -como decía la colega IsabelM, es decir, si le pongo a la clase "rojo" un color verde, FF no lo cambia. A que es curioso?
Voy a probar tu código.