Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/10/2010, 15:31
Avatar de aniMAYtions
aniMAYtions
 
Fecha de Ingreso: diciembre-2007
Ubicación: Granada
Mensajes: 519
Antigüedad: 16 años, 4 meses
Puntos: 2
menú desplegable y css

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:
Ver original
  1. <div id="menu" class='topmenu' >
  2.                 <ul id="nav">
  3.                     <li><a href="#">Nuestro Centro</a></li>
  4.                     <li><a href="#">Actividades Formativas</a>
  5.                         <ul class="submenu">
  6.                             <li><a href="#">Cursos</a></li>
  7.                             <li><a href="#">Talleres</a></li>
  8.                         </ul>
  9.                     </li>
  10.                     <li><a href="#">Noticias y Eventos</a>
  11.                         <ul class="submenu">
  12.                             <li><a href="#">Noticias</a></li>
  13.                             <li><a href="#">Eventos</a></li>
  14.                             <li><a href="#">Curiosidades</a></li>
  15.                         </ul>
  16.                     </li>
  17.                     <li><a href="#">Contacto</a></li>
  18.                 </ul>
  19.              </div>

Luego los estilos van
Código CSS:
Ver original
  1. .topmenu
  2. {
  3.     height:1.2em;
  4.     background-color:#fcba00;
  5.     margin:auto;    
  6.     text-align:center;
  7.     position:relative;
  8. }
  9. #nav
  10. {
  11.     list-style:none;
  12.     margin:0px;
  13.     padding:0px;
  14.     background-color:#fcba00;
  15.     position:relative;
  16.     font-family:"Century Gothic", Arial;
  17. }
  18. #nav li
  19. {
  20.     float:left;  
  21.     width:25%
  22. }
  23. #nav li:hover
  24. {
  25.     background-color:#FFFFFF;
  26.     color:#fcba00;
  27. }
  28. #nav li a
  29. {
  30.     display:block;
  31.     text-decoration:none;
  32.     color:#FFFFFF;
  33.     font-weight:bold;
  34. }
  35. #nav li a:hover
  36. {
  37.     color:#fcba00;
  38.  
  39. }
  40. /* Submenu */
  41. #nav ul.submenu
  42. {
  43.     padding:0px;
  44.     position:absolute;
  45.     list-style:none;
  46.     background-color:#fcba00;
  47.     width:25%;
  48.     text-align:center;
  49. }
  50. #nav ul.submenu li
  51. {
  52.     float:none;
  53.     background-image:none;
  54.     width:100%;
  55.     color: #FFFFFF;
  56.     border-bottom-color:#FFFFFF;
  57. }

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!!