Foros del Web » Creando para Internet » CSS »

Problema con menu diesplegable

Estas en el tema de Problema con menu diesplegable en el foro de CSS en Foros del Web. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original { margin : 0px ; padding : 0px ; outline : 0 ; } html , body { width ...
  #1 (permalink)  
Antiguo 12/09/2011, 15:01
 
Fecha de Ingreso: julio-2011
Mensajes: 39
Antigüedad: 12 años, 9 meses
Puntos: 0
Problema con menu diesplegable

Código CSS:
Ver original
  1. { margin: 0px;padding: 0px; outline: 0;}
  2. html, body { width: 100%;}body
  3. { background: #366;font-family: Verdana, Arial, Helvetica, sans-serif;}
  4. #menu {  FONT-WEIGHT: normal; FONT-SIZE: 9px; COLOR: #000000; FONT-FAMILY: Verdana,  Arial, Helvetica, sans-serif; TEXT-DECORATION: none;}
  5. #menu ul { list-style-type: none;}
  6. #menu ul li.nivel1 { width: 162px;}
  7. #menu ul li { text-align: left;}
  8. #menu ul li.primera { border-top: none;}
  9. #menu ul li a {display: block;text-decoration: none;color: #000;background-color: #bab593;border: none;border-top: none;padding:none;position: relative;}
  10. #menu ul li:hover {position: relative;background-color: #bab593;color: #bab593;}
  11. #menu ul li a:hover,
  12. #menu ul li:hover a.nivel1 {background-color: #bab593;color: #00;position: relative;}
  13. #menu ul li a.nivel1 {display: block!important;display: none;position: relative;}
  14. #menu ul li ul {display: none;}
  15. #menu ul li:hover > ul {display: block;position: absolute;left: 161px;top:-1px;}
  16. #menu ul li ul li a {width: 162px;background-color: #bab593;color: #000;position: relative;}
  17. #menu ul li ul li a:hover {position: relative;background-color: #6CC;color: #000;}
  18. #menu ul li a.nivel1ie {width: 162px;padding: 0px;}
  19. #menu ul li a.subnivel {padding-bottom: 0px;}
  20. #menu ul li a:hover ul.nivel2,
  21. #menu ul.nivel2 li a:hover ul.nivel3,
  22. #menu ul.nivel3 li a:hover ul.nivel4 {display: block;position: absolute;left: 162px;top:-1px;}table.falsa {border-collapse:collapse;border:0px;float: left;}
  23. #menu ul li:hover a.nivel


tengo este código en css y no me ha salido que me despliegue todos los subniveles que tengo alguien me podria ayudar, aqui va el código asp
solamente semanal me lo despliega bien los demás no he podido.. porfavor necesito ayudaa. saludos


Código ASP:
Ver original
  1. <tr><td class="cafeclaro3"><link rel="stylesheet" href="css/menuu.css" type="text/css"/>
  2. <div id="menu">
  3. <ul>
  4.  
  5.  
  6.   </li>
  7.   <li class="nivel1"><a href="#" class="nivel1"><img height=4 hspace=4 src="imag/cuadro.gif" width=4 vspace=2>Informes Formales</a>
  8.  
  9.     <ul class="nivel2">
  10.         <li class="primera"><a href="#" class="nivel1">Reclamos Ingresados y Terminados</a>
  11.  
  12.  
  13.             <ul class="nivel3">
  14.             <li class="primera"><a href="#" class="nivel1">Semanal</a>
  15.  
  16.        
  17.  
  18.                 <ul class="nivel4">
  19.                     <li class="primera"><a href="informes/Informe1.asp">volumen reclamos ingresados</a></li>
  20.                     <li><a href="#">Stock reclamos Anual</a></li>
  21.                     <li><a href="#">Acumulación reclamos terminados</a></li>
  22.                     <li><a href="#">Evolución de reclamos ingresados</a></li>
  23.                     <li><a href="#">Evolución de reclamos terminados</a></li>
  24.                     <li><a href="#">Gestión de Analistas</a></li>
  25.                     <li><a href="#">Plazos promedio por canal</a></li>
  26.                 </ul>
  27.            
  28.  
  29.  
  30.  
  31.             </li>
  32.            
  33.          <li><a href="#" class="nivel1"s>Mensual</a></li>
  34.                 <ul class="nivel4">
  35.                     <li class="primera"><a href="#">volumen reclamos ingresados</a></li>
  36.                     <li><a href="#">Stock reclamos Anual</a></li>
  37.                     <li><a href="#">Acumulación reclamos terminados</a></li>
  38.                     <li><a href="#">Evolución de reclamos ingresados</a></li>
  39.                     <li><a href="#">Evolución de reclamos terminados</a></li>
  40.                     <li><a href="#">Gestión de Analistas</a></li>
  41.                     <li><a href="#">Plazos promedio por canal</a></li>
  42.                 </ul>
  43.  
  44.                 <li><a href="#">Diario</a></li>
  45.                    
  46.                     </ul>
  47.                    
  48.                    
  49.                    
  50.  
  51.         </li>
  52.         <!----  españa igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  53.        
  54.         <li><a href="#">A España</a></li>
  55.        
  56.        
  57.     <!----  españa igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  58.  
  59.    
  60.     <!----  comite gerentes igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  61.         <li><a href="#">Comite Gerentes</a></li>
  62.     <!----  comite gerentes igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  63.    
  64.    
  65.    
  66.    
  67.     <!---- reclamos diarios igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  68.     <li><a href="#">Reclamos Diarios</a></li>
  69.    
  70.     <!---- reclamos diarios igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  71.    
  72.    
  73.    
  74.         <!----devoluciones igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  75.         <li><a href="#">Devoluciones</a></li>
  76.        
  77.         <!----devoluciones igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  78.     </ul>
  79.  
  80. </li>
  81. </ul>
  82. </div>
  83.    
  84.          
  85.            
  86.                   </tr>
  87.                 </td>
  88.                 <tr>
  89.                     <td class="textabinfo"></td>
  90.                 </tr>
  #2 (permalink)  
Antiguo 12/09/2011, 19:04
Avatar de sauljps  
Fecha de Ingreso: septiembre-2011
Ubicación: Caracas, Venezuela
Mensajes: 13
Antigüedad: 12 años, 7 meses
Puntos: 4
Respuesta: Problema con menu diesplegable

Hola! Ese código lo hiciste tu a mano o fue generado de manera automatica por algún CMS?

Porque tiene tantas clases?

Cuando empieza el menú hay un LI que cierra pero ningún LI que abre:

Código HTML:
Ver original
  1. <tr><td class="cafeclaro3"><link rel="stylesheet" href="css/menuu.css" type="text/css"/>
  2. <div id="menu">
  3. <ul>
  4.  
  5.  
  6.   </li>

Y el problema es facil detectable

Aquí:

Código HTML:
Ver original
  1. <ul class="nivel4">
  2.                     <li class="primera"><a href="#">volumen reclamos ingresados</a></li>
  3.                     <li><a href="#">Stock reclamos Anual</a></li>
  4.                     <li><a href="#">Acumulación reclamos terminados</a></li>
  5.                     <li><a href="#">Evolución de reclamos ingresados</a></li>
  6.                     <li><a href="#">Evolución de reclamos terminados</a></li>
  7.                     <li><a href="#">Gestión de Analistas</a></li>
  8.                     <li><a href="#">Plazos promedio por canal</a></li>
  9.                 </ul>
  10.  
  11.                 <li><a href="#">Diario</a></li>

Ese UL debería de estar entro del LI de "Diario" o de "Mensual" de donde lo quieras poner, de esta manera

Código HTML:
Ver original
  1. <li><a href="#">Diario</a>
  2. <ul class="nivel4">
  3.                     <li class="primera"><a href="#">volumen reclamos ingresados</a></li>
  4.                     <li><a href="#">Stock reclamos Anual</a></li>
  5.                     <li><a href="#">Acumulación reclamos terminados</a></li>
  6.                     <li><a href="#">Evolución de reclamos ingresados</a></li>
  7.                     <li><a href="#">Evolución de reclamos terminados</a></li>
  8.                     <li><a href="#">Gestión de Analistas</a></li>
  9.                     <li><a href="#">Plazos promedio por canal</a></li>
  10.                 </ul>
  11. </li>

Y listo

Y si lo estas programando tu a mano recuerda que [URL="http://www.jps.com.ve/diseno-web/7-razones-para-no-usar-tablas/"]no es bueno utilizar tablas para la maquetación de los sitios web[/URL] :)

Cualquier cosa preguntas
  #3 (permalink)  
Antiguo 12/09/2011, 21:14
 
Fecha de Ingreso: julio-2011
Mensajes: 39
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Problema con menu diesplegable

Gracias Por La Ayuda, pero me sigue saliendo lo mismo, hice lo que me dijiste y no me sale los subniveles de mensual, porque semanal me lo despliega bien, y ese código lo saque de un CMS, tenia otro código hecho por mi mismo pero no me resulto lo que quería.


saludos
  #4 (permalink)  
Antiguo 12/09/2011, 21:27
Avatar de sauljps  
Fecha de Ingreso: septiembre-2011
Ubicación: Caracas, Venezuela
Mensajes: 13
Antigüedad: 12 años, 7 meses
Puntos: 4
Respuesta: Problema con menu diesplegable

Aquí está el código completo

Código HTML:
Ver original
  1. <div id="menu">
  2.             <ul>
  3.                 <li class="nivel1">
  4.                     <a href="#" class="nivel1"><img height=4 hspace=4 src="imag/cuadro.gif" width=4 vspace=2>Informes Formales</a>
  5.                     <ul class="nivel2">
  6.                         <li class="primera">
  7.                             <a href="#" class="nivel1">Reclamos Ingresados y Terminados</a>
  8.                             <ul class="nivel3">
  9.                                 <li class="primera">
  10.                                     <a href="#" class="nivel1">Semanal</a>
  11.                                     <ul class="nivel4">
  12.                                         <li class="primera">
  13.                                             <a href="informes/Informe1.asp">volumen reclamos ingresados</a>
  14.                                         </li>
  15.                                         <li>
  16.                                             <a href="#">Stock reclamos Anual</a>
  17.                                         </li>
  18.                                         <li>
  19.                                             <a href="#">Acumulación reclamos terminados</a>
  20.                                         </li>
  21.                                         <li>
  22.                                             <a href="#">Evolución de reclamos ingresados</a>
  23.                                         </li>
  24.                                         <li>
  25.                                             <a href="#">Evolución de reclamos terminados</a>
  26.                                         </li>
  27.                                         <li>
  28.                                             <a href="#">Gestión de Analistas</a>
  29.                                         </li>
  30.                                         <li>
  31.                                             <a href="#">Plazos promedio por canal</a>
  32.                                         </li>
  33.                                     </ul>
  34.                                 </li>
  35.                                 <li>
  36.                                     <a href="#" class="nivel1"s>Mensual</a>
  37.                                 </li>
  38.                                 <li>
  39.                                     <a href="#">Diario</a>
  40.                                     <ul class="nivel4">
  41.                                         <li class="primera">
  42.                                             <a href="#">volumen reclamos ingresados</a>
  43.                                         </li>
  44.                                         <li>
  45.                                             <a href="#">Stock reclamos Anual</a>
  46.                                         </li>
  47.                                         <li>
  48.                                             <a href="#">Acumulación reclamos terminados</a>
  49.                                         </li>
  50.                                         <li>
  51.                                             <a href="#">Evolución de reclamos ingresados</a>
  52.                                         </li>
  53.                                         <li>
  54.                                             <a href="#">Evolución de reclamos terminados</a>
  55.                                         </li>
  56.                                         <li>
  57.                                             <a href="#">Gestión de Analistas</a>
  58.                                         </li>
  59.                                         <li>
  60.                                             <a href="#">Plazos promedio por canal</a>
  61.                                         </li>
  62.                                     </ul>
  63.                                 </li>
  64.                             </ul>
  65.                         </li>
  66.                         <!----  españa igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  67.                         <li>
  68.                             <a href="#">A España</a>
  69.                         </li>
  70.                         <!----  españa igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  71.                         <!----  comite gerentes igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  72.                         <li>
  73.                             <a href="#">Comite Gerentes</a>
  74.                         </li>
  75.                         <!----  comite gerentes igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  76.                         <!---- reclamos diarios igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  77.                         <li>
  78.                             <a href="#">Reclamos Diarios</a>
  79.                         </li>
  80.                         <!---- reclamos diarios igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  81.                         <!----devoluciones igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  82.                         <li>
  83.                             <a href="#">Devoluciones</a>
  84.                         </li>
  85.                         <!----devoluciones igual tiene mensual diario anual, y despliega al igual que Reclamos Ingresados y Terminados ---->
  86.                     </ul>
  87.                 </li>
  88.             </ul>
  89.         </div>

Te deberia de funcionar perfecto, avisame
  #5 (permalink)  
Antiguo 13/09/2011, 08:49
 
Fecha de Ingreso: julio-2011
Mensajes: 39
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Problema con menu diesplegable

Gracias Men Por tu ayuda pude resolver y completar el menú
  #6 (permalink)  
Antiguo 13/09/2011, 09:52
Avatar de sauljps  
Fecha de Ingreso: septiembre-2011
Ubicación: Caracas, Venezuela
Mensajes: 13
Antigüedad: 12 años, 7 meses
Puntos: 4
Respuesta: Problema con menu diesplegable

Que buenas noticias!

Cualquier duda pues a la orden :)

Saludos
  #7 (permalink)  
Antiguo 14/09/2011, 20:32
 
Fecha de Ingreso: julio-2011
Mensajes: 39
Antigüedad: 12 años, 9 meses
Puntos: 0
Respuesta: Problema con menu diesplegable

Sauljps tengo otro problema pero no es en código sino es con los navegadores en firefox se ve todo lo que tengo y en internet explorer no se me ve el menú eso porque es ??


saludos

Etiquetas: html, fondo
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 14:27.