Tema: Problemilla con menú <ul>
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 31/03/2011, 05:04
saul123
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 13 años, 1 mes
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. </style>
  80. <ul id="menu">
  81.     <li>Producto1</li>
  82.     <li>Producto2</li>
  83.     <li>Producto3
  84.         <ul ><li>Productos especiales
  85.                 <ul id="lista" ><li >lista de Productos especiales
  86.                         <ul id="lista2"><li>1</li>
  87.                             <li>2</li>
  88.                             <li>3</li>
  89.                         </ul>
  90.                     </li>
  91.                 </ul>
  92.             </li>
  93.         </ul>
  94.     </li>
  95. </ul>