Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/08/2013, 01:25
Avatar de jcc
jcc
 
Fecha de Ingreso: octubre-2003
Ubicación: Alcalá de Henares
Mensajes: 288
Antigüedad: 20 años, 6 meses
Puntos: 1
Menú desplegable vertical en varias columnas

Hola. Tengo en mi página personal unos menús diseñados con listas y hojas de estilo CSS, y me funcionan muy bien; básicamente es un menú horizontal con una o varias líneas de botones -dependiendo de las opciones- y luego unos menús desplegables verticales para las opciones de segundo nivel.

El problema es que en algunos casos estos menús verticales desplegables son muy largos, por lo que me interesaría dividirlos en varias columnas contiguas; pero no consigo hacerlo. supongo que habrá alguna manera de indicarle que, cuando llegue al final previsto, salte a la siguiente columna, pero me ha sido imposible conseguirlo, y aunque he consultado distintos tutoriales de internet, tampoco me han sacado de dudas.

El código CSS que define el menú es el siguiente:

Código CSS:
Ver original
  1. /* Menú 1 fila*/
  2.  
  3. body, ul, li {margin:0; padding:0;}
  4. ul {list-style:none; display:inline-block;}
  5. ul li {float:left;}
  6.  
  7. ul#menusimple {margin:none; list-style:none; height:32px; width:990px; background:#3b3b3b;}
  8.  
  9. ul#menusimple li {height:32px;width:165px;}
  10. ul#menusimple li a {display:block; padding:10px; height:12px; color:#FFF; text-align: center; font-family:Arial, Verdana, Geneva, sans-serif;
  11. font-size:12px;font-weight:bold; text-decoration:none;}
  12. ul#menusimple li a:hover {background:#CCC; }
  13.  
  14. ul#menusimple li ul {display:none;}
  15. ul#menusimple li:hover ul {display:block; background:#999; position:absolute;}
  16.  
  17. ul#menusimple li:hover ul li {float:none; position:relative; background:#999;}
  18.  
  19. /* Fin Menú 1 fila*/
¿Alguien me puede ayudar? Gracias.

Última edición por pzin; 20/08/2013 a las 02:01 Razón: formato código