menú desplegable y css

[aniMAYtions]

Hola a tod@s.
Estoy realizando un menú desplegable basado en estilos y jquery.
Pero mi problema reside en los estilos.
Resulta que yo tengo mi menú de la siguiente forma:

Código HTML:

<div id="menu" class='topmenu' >
                <ul id="nav">
                    <li><a href="#">Nuestro Centro</a></li>
                    <li><a href="#">Actividades Formativas</a>
                        <ul class="submenu">
                            <li><a href="#">Cursos</a></li>
                            <li><a href="#">Talleres</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Noticias y Eventos</a>
                        <ul class="submenu">
                            <li><a href="#">Noticias</a></li>
                            <li><a href="#">Eventos</a></li>
                            <li><a href="#">Curiosidades</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contacto</a></li>
                </ul>
             </div>
 

Luego los estilos van

Código CSS:

.topmenu
{
    height:1.2em;
    background-color:#fcba00; 
    margin:auto;    
    text-align:center;
    position:relative;
}
#nav 
{ 
    list-style:none; 
    margin:0px;
    padding:0px;
    background-color:#fcba00;
    position:relative;
    font-family:"Century Gothic", Arial;
}
#nav li 
{ 
    float:left;  
    width:25% 
}
#nav li:hover 
{ 
    background-color:#FFFFFF;
    color:#fcba00;
}
#nav li a 
{ 
    display:block; 
    text-decoration:none; 
    color:#FFFFFF; 
    font-weight:bold; 
}
#nav li a:hover 
{ 
    color:#fcba00; 
 
}
/* Submenu */
#nav ul.submenu 
{ 
    padding:0px; 
    position:absolute; 
    list-style:none; 
    background-color:#fcba00;
    width:25%;
    text-align:center;
}
#nav ul.submenu li 
{ 
    float:none; 
    background-image:none; 
    width:100%;
    color: #FFFFFF;
    border-bottom-color:#FFFFFF;
}
 

Hasta aquí todo perfecto, pero si os dais cuenta los estilos están basados en 2 colores. Uno es un tipo de amarillo y el otro es blanco.
Al principio todo el menú es amarillo y las letras en blanco.
Cuando me situo en los li principales, el fondo se vuelve blanco y las letras amarillas y se despliega el submenú correspondiente, cuyo fondo es amarillo y las letras blancas y cuando me situo en cualquiera de estos submenús se invierten otra vez los colores.
La cosa está en el menú padre, cuando abandono el li para bajar a un submenú, el fondo sigue siendo blanco pero la letra también. Lo que me gustaría en esta situación es que el fondo fuese blanco, pero la letra fuese amarilla, ya que si no no se puede leer el menú padre, me entendeis??
La verdad es que me he perdido un poco entre tantos ul's y li's..

Gracias por la ayuda!!

[reyvolsam]

Mejor te doy un codigo un poco mas sencillo:

Código HTML:

<div class="menuContainer">
 
<ul id="menu">
    <li><a href="#">Progamación <img src="arrow.png" width="12" height="12" alt="desplegable" /></a>
        <ul>
            <li><a href="#">PHP</a></li>
            <li><a href="#">ASP</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
    </li>
    
    <li><a href="#">SEO</a></li>
    
    <li><a href="#">Diseño <img src="arrow.png" width="12" height="12" alt="desplegable" /></a>
        <ul>
            <li><a href="#">Interfaz</a></li>
            <li><a href="#">Plantillas</a></li>
      </ul>
    </li>
    <li><a href="#">Publicidad</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
<div class="clear"></div>
</div>
 

Código CSS:

.clear{
    clear:both;
    }
img{
    border:none;
    }
/*
** Menu
*/
.menuContainer{
    background:#09F;
    }
ul#menu a:hover, ul#menu ul, ul#menu li:hover{
    background:#F90;
    } 
.menuContainer ul{
    list-style:none;    
    margin:0;
    padding:0;
    }
ul#menu li{
    float:left;
    position:relative;
    margin-right:10px;
    }
ul#menu a{
    color:#FFF;
    text-decoration:none;
    padding:10px;
    display:block;
    }
ul#menu ul{
    position:absolute;
    left:0;
    display:none;
    }
ul#menu li:hover ul{
    display:block;
}
ul#menu li:hover ul li{
    margin:0;
}
ul#menu li:hover ul li a{
    width:150px;
    }
ul#menu li:hover ul a:hover{
    background:#0C3;
}
 

Espero te sirva!!!

[opzina]

yo tb me he perdido, revisa tus background-color, color (color de los textos) y a:hover, a:link, a:visited, a:active.

y cuentanos.

Saludos.

[aniMAYtions]

Gracias reyvolsam por tu respuesta.
Hasta la noche no puedo probarlo pero, de todas formas, el código que puse ya está amoldado a mis necesidades en cuestión de tamaños y eso y lo único que necesito es lo del color de el menú principal cuando me dirijo al submenú.
Gracias otra vez y saludos!!

[hdennison]

cambia
#nav li:hover
{
background-color:#FFFFFF;
color:#fcba00;
}

por

#nav li a:hover
{
background-color:#FFFFFF;
color:#fcba00;
}

y asunto arreglado ;)

[aniMAYtions]

Muchísimas gracias hdennison, ha quedado perfecto!!
Saludos y encantada de poder, una vez más, contar con vosotr@s.