Foros del Web » Creando para Internet » CSS »

menú desplegable y css

Estas en el tema de menú desplegable y css en el foro de CSS en Foros del Web. Hola a [email protected] Estoy realizando un menú desplegable basado en estilos y jquery. Pero mi problema reside en los estilos. Resulta que yo tengo mi ...
  #1 (permalink)  
Antiguo 20/10/2010, 16:31
Avatar de aniMAYtions  
Fecha de Ingreso: diciembre-2007
Ubicación: Granada
Mensajes: 508
Antigüedad: 10 años
Puntos: 1
menú desplegable y css

Hola a [email protected]
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!!
  #2 (permalink)  
Antiguo 20/10/2010, 23:25
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 7 años, 7 meses
Puntos: 3
Respuesta: menú desplegable y css

Mejor te doy un codigo un poco mas sencillo:


Código HTML:
Ver original
  1. <div class="menuContainer">
  2.  
  3. <ul id="menu">
  4.     <li><a href="#">Progamación <img src="arrow.png" width="12" height="12" alt="desplegable" /></a>
  5.         <ul>
  6.             <li><a href="#">PHP</a></li>
  7.             <li><a href="#">ASP</a></li>
  8.             <li><a href="#">JavaScript</a></li>
  9.         </ul>
  10.     </li>
  11.    
  12.     <li><a href="#">SEO</a></li>
  13.    
  14.     <li><a href="#">Diseño <img src="arrow.png" width="12" height="12" alt="desplegable" /></a>
  15.         <ul>
  16.             <li><a href="#">Interfaz</a></li>
  17.             <li><a href="#">Plantillas</a></li>
  18.       </ul>
  19.     </li>
  20.     <li><a href="#">Publicidad</a></li>
  21.     <li><a href="#">Contacto</a></li>
  22. </ul>
  23. <div class="clear"></div>
  24. </div>

Código CSS:
Ver original
  1. .clear{
  2.     clear:both;
  3.     }
  4. img{
  5.     border:none;
  6.     }
  7. /*
  8. ** Menu
  9. */
  10. .menuContainer{
  11.     background:#09F;
  12.     }
  13. ul#menu a:hover, ul#menu ul, ul#menu li:hover{
  14.     background:#F90;
  15.     }
  16. .menuContainer ul{
  17.     list-style:none;   
  18.     margin:0;
  19.     padding:0;
  20.     }
  21. ul#menu li{
  22.     float:left;
  23.     position:relative;
  24.     margin-right:10px;
  25.     }
  26. ul#menu a{
  27.     color:#FFF;
  28.     text-decoration:none;
  29.     padding:10px;
  30.     display:block;
  31.     }
  32. ul#menu ul{
  33.     position:absolute;
  34.     left:0;
  35.     display:none;
  36.     }
  37. ul#menu li:hover ul{
  38.     display:block;
  39. }
  40. ul#menu li:hover ul li{
  41.     margin:0;
  42. }
  43. ul#menu li:hover ul li a{
  44.     width:150px;
  45.     }
  46. ul#menu li:hover ul a:hover{
  47.     background:#0C3;
  48. }

Espero te sirva!!!
  #3 (permalink)  
Antiguo 20/10/2010, 23:27
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: menú desplegable y css

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.
  #4 (permalink)  
Antiguo 20/10/2010, 23:32
Avatar de aniMAYtions  
Fecha de Ingreso: diciembre-2007
Ubicación: Granada
Mensajes: 508
Antigüedad: 10 años
Puntos: 1
Respuesta: menú desplegable y css

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!!
  #5 (permalink)  
Antiguo 21/10/2010, 12:36
 
Fecha de Ingreso: octubre-2010
Mensajes: 66
Antigüedad: 7 años, 2 meses
Puntos: 7
Respuesta: menú desplegable y css

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

por

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

y asunto arreglado ;)
  #6 (permalink)  
Antiguo 21/10/2010, 15:13
Avatar de aniMAYtions  
Fecha de Ingreso: diciembre-2007
Ubicación: Granada
Mensajes: 508
Antigüedad: 10 años
Puntos: 1
Respuesta: menú desplegable y css

Muchísimas gracias hdennison, ha quedado perfecto!!
Saludos y encantada de poder, una vez más, contar con [email protected]

Etiquetas: desplegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:51.