Foros del Web » Creando para Internet » CSS »

Problemilla con menú <ul>

Estas en el tema de Problemilla con menú <ul> en el foro de CSS en Foros del Web. Hola, agradeceria si alguien me puede ayudar con el siguiente problema que me surgió. Es el primer menú que hago con listas, y la verdad ...
  #1 (permalink)  
Antiguo 31/03/2011, 02:24
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 8 años, 5 meses
Puntos: 7
Pregunta Problemilla con menú <ul>

Hola, agradeceria si alguien me puede ayudar con el siguiente problema que me surgió.
Es el primer menú que hago con listas, y la verdad es que a ratos se me resisten un poco los estilos.... por no decir que las compatibilidades de exploradores me llevan de cabeza . bueno, ahí va el código:

Código HTML:
<style type="text/css">
body { 
     margin:0; 
     padding:0; 
     font-family:Verdana, Geneva, sans-serif;  
     font-size:0.9em; font-family:"kozgopro-extralight"; src: url('kozgopro-extralight.otf') format(“opentype”);  
     }
ul.menu {  
     list-style:none;  
     margin:0;  
     padding:0;  
     position:absolute;  
     top:117px;  
     }
ul.menu ul {  
     display:none;  
     }
ul.menu li {  
     display:block;  
     width:150px;  
     height:30px;  
     background:white;  
     padding:5px;  
     padding-left:15px;  
     list-style:none; 
     }
ul.menu li:hover {  
     background:rgb(238,191,236);  
     width:150px;  
     border-right:2px solid rgb(186,0,181);  
     }
ul.menu li:hover >ul {  
     display:block;  
     position:relative;  
     top:-23px;  
     left:117px; 
     }
</style>
<ul class="menu">
    <li>Producto1</li>
    <li>Producto2</li>
    <li>Producto3
        <ul><li>Productos especiales
                <ul><li>lista de Productos especiales
                        <ul><li>1</li>
                            <li>2</li>
                            <li>3</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul> 
Bueno, el asunto es que cuando hago el :hover sobre <li>lista de Productos especiales, el menú se me desplega desplazado hacia abajo debido a que el texto supera el ancho del <li>; y queda muy antiestético.
Alguien podria echarme una manita con este asunto? jeje de nuevo, gracias!
  #2 (permalink)  
Antiguo 31/03/2011, 06:04
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Problemilla con menú <ul>

Hola

Encontre esta solución espero que te sirva .
Código HTML:
Ver original
  1. <style type="text/css">
  2. body {
  3.      margin:0;
  4.      padding:0;
  5.      font-family:Verdana, Geneva, sans-serif;  
  6.      font-size:0.9em; font-family:"kozgopro-extralight"; src: url('kozgopro-extralight.otf') format(opentype);  
  7.      }
  8. #menu {  
  9.      list-style:none;  
  10.      margin:0;  
  11.      padding:0;  
  12.      position:absolute;  
  13.      top:117px;  
  14.      }
  15. #menu ul {  
  16.      display:none;  
  17.      }
  18. #menu li {  
  19.      display:block;  
  20.      width:150px;  
  21.      height:30px;  
  22.      background:white;  
  23.      padding:5px;  
  24.      padding-left:15px;  
  25.      list-style:none;
  26.      margin-top:3px;
  27.      }
  28. #menu li:hover {  
  29.      background:rgb(238,191,236);  
  30.      width:150px;  
  31.       height:30px;
  32.      border-right:2px solid rgb(186,0,181);  
  33.      }
  34. #menu li:hover >ul {  
  35.      display:block;  
  36.      position:relative;  
  37.      top:-23px;  
  38.      left:117px;
  39.      }
  40. #lista  li{  
  41.      display:block;  
  42.      width:200px;  
  43.      height:30px;  
  44.      background:white ;  
  45.      padding:5px;  
  46.      padding-left:15px;
  47.      padding-right:10px;
  48.      list-style:none;
  49.      }
  50. #lista li:hover {  
  51.      background:rgb(238,191,236);  
  52.      width:180px;  
  53.      border-right:2px solid rgb(186,0,181);  
  54.       padding-right:10px;
  55.  
  56.      }
  57.      #lista li:hover >ul {  
  58.      display:block;  
  59.      position:relative;  
  60.      top:-23px;  
  61.      left:152px;
  62.      }
  63.     #lista2  li{  
  64.      display:block;  
  65.      width:50px;  
  66.      height:30px;  
  67.      background:white ;  
  68.      padding:5px;  
  69.      padding-left:15px;
  70.      padding-right:10px;
  71.      list-style:none;
  72.      }
  73. #lista2 li:hover {  
  74.      background:rgb(238,191,236);  
  75.      width:50px;  
  76.      border-right:2px solid rgb(186,0,181);  
  77.       padding-right:10px;
  78.      }
  79. <ul id="menu">
  80.     <li>Producto1</li>
  81.     <li>Producto2</li>
  82.     <li>Producto3
  83.         <ul ><li>Productos especiales
  84.                 <ul id="lista" ><li >lista de Productos especiales
  85.                         <ul id="lista2"><li>1</li>
  86.                             <li>2</li>
  87.                             <li>3</li>
  88.                         </ul>
  89.                     </li>
  90.                 </ul>
  91.             </li>
  92.         </ul>
  93.     </li>
  94. </ul>
  #3 (permalink)  
Antiguo 31/03/2011, 06:30
 
Fecha de Ingreso: junio-2009
Mensajes: 156
Antigüedad: 8 años, 5 meses
Puntos: 7
Respuesta: Problemilla con menú <ul>

pues no, mas al contrario, me manda el css a hacer puñetas
además que el añadir una clase más no me hace mucha gracia... la idea era crear el css y tener luego los menús "predefinidos"... es decir; sólo hacer la lista con class="menu" y listo..
gracias de todas formas

Etiquetas: <li>, <ul>, menu-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 10:00.