Foros del Web » Creando para Internet » CSS »

Problema con Menu emergente

Estas en el tema de Problema con Menu emergente en el foro de CSS en Foros del Web. Mi problema es el siguiente: hice un menu emergente con CSS y me quedo como queria. Al menu le puse una imagen de fondo y ...
  #1 (permalink)  
Antiguo 19/03/2011, 19:29
 
Fecha de Ingreso: marzo-2011
Mensajes: 2
Antigüedad: 6 años, 8 meses
Puntos: 0
Problema con Menu emergente

Mi problema es el siguiente: hice un menu emergente con CSS y me quedo como queria. Al menu le puse una imagen de fondo y otra diferente para cuando el mouse queda encima. Lo que yo quiero es que al posisionar el mouse sobre dicho menu y la imagen cambie se mantega esa misma imagen mientras exploro el submenu, ya que cuando saco el puntero del mouse del menu la imagen vuelve a la que le puse de fondo por defecto.

Aqui dejo el codigo CSS del menu:


.menuContainer {
background-color: #0000FF;
}

.menuContainer ul{
list-style:none;
margin:0;
padding:0;
}


ul#menuem li { /******fondo texto menu oculto**********/
float:left;
list-style: none;
background-color: none;
}

ul#menuem a { /***menu visible---imagen de fondo por defecto***/
display:block;
width: 320px;
height: 105px;
color:#FFF;
text-decoration:none;
background-image: url(images/menuem.png);
}

ul#menuem a:hover { /***imagen de fondo cuando el mouse queda encima de la imagen***/
display: block;
background-image: url(images/menuem_hover.png);
}

ul#menuem ul { /****fondo del menu oculto****/
position: absolute;
display: none;
width: 960px;
height: 30px;
background-image: url(images/Fondo_menuhover_desplegable.p…

}

ul#menuem li:hover ul {
display: block;
}

ul#menuem li:hover ul li {
margin:0;
margin-top: 3px;
}

ul#menuem li:hover ul li a { /***texto del menu oculto****/
padding-left: 10px;
padding-right: 35px;
padding-top: 2px;
width: auto;
height: 18px;
text-align: left;
color: #FFFFFF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
background-image: none;
margin-left: 32px;
outline: 0;

}

ul#menuem li:hover ul a:hover { /***hover del texto del menu***/
color: #00FF00;
outline: 0;
}





Y aqui dejo el codigo HTML:

<div class="menuContainer">
<ul id="menuem">
<li><a href="#"></a>
<ul>
<li><a href="#">Carmelo</a></li>
<li><a href="#">Colonia del Sacramento</a></li>
<li><a href="#">Fray Bentos</a></li>
<li><a href="#">Mercedes</a></li>
<li><a href="#">Nueva Palmira</a></li>
<li><a href="#">Paysandú</a></li>
<li><a href="#">Salto</a></li>
</ul>
</li>
</div>




Ante todo muchas gracias, y ojala puedan darme una solucion. Ya que necesito el menu para tener terminada mi web.
  #2 (permalink)  
Antiguo 19/03/2011, 23:04
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: Problema con Menu emergente

Que tal si en vez de hacerle hover a los enlaces, le haces hover a los elementos de listas, de esta manera como el <li> principal contiene a todos los que conforman el submenú, hasta que no salga completamente el menú, no cambiaría de color, seria algo así:
Código CSS:
Ver original
  1. <style>
  2. .menuContainer {
  3. background-color: #0000FF;
  4. }
  5.  
  6. .menuContainer ul{
  7. list-style:none;   
  8. margin:0;
  9. padding:0;
  10. }
  11.  
  12.  
  13. ul#menuem li { /******fondo texto menu oculto**********/
  14. float:left;
  15. list-style: none;
  16. background-color: none;
  17. background: #03F;
  18. }
  19.  
  20. ul#menuem a { /***menu visible---imagen de fondo por defecto***/
  21. display:block;
  22. width: 320px;
  23. height: 105px;
  24. color:#FFF;
  25. text-decoration:none;
  26. }
  27.  
  28. ul#menuem a:hover { /***imagen de fondo cuando el mouse queda encima de la imagen***/
  29. display: block;
  30. }
  31.  
  32. ul#menuem li:hover {
  33.     background:#FF0;
  34. }
  35.  
  36. ul#menuem ul { /****fondo del menu oculto****/
  37. position: absolute;
  38. display: none;
  39. width: 960px;
  40. height: 30px;
  41. background: #F00;
  42.  
  43. }
  44.  
  45. ul#menuem li:hover ul {
  46. display: block;
  47. color: #FF0;
  48. }
  49.  
  50. ul#menuem li:hover ul li {
  51. margin:0;
  52. margin-top: 3px;
  53. }
  54.  
  55. ul#menuem li:hover ul li a { /***texto del menu oculto****/
  56. padding-left: 10px;
  57. padding-right: 35px;
  58. padding-top: 2px;
  59. width: auto;
  60. height: 18px;
  61. text-align: left;
  62. color: #FFFFFF;
  63. font-family: Tahoma, Arial, Helvetica, sans-serif;
  64. font-size: 11px;
  65. background-image: none;
  66. margin-left: 32px;
  67. outline: 0;
  68.  
  69. }
  70.  
  71. ul#menuem li:hover ul a:hover { /***hover del texto del menu***/
  72. color: #00FF00;
  73. outline: 0;
  74. }
  75. </style>

He cambiado las imágenes por colores para observar rápidamente el efecto.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.

Etiquetas: desplegable, emergente, html
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:21.