Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/11/2011, 04:07
Avatar de jor_0203
jor_0203
 
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 13 años, 1 mes
Puntos: 8
menu css de tres niveles

de casualidad alguien no tienes un menu de css que tenga tres nives, yo solo he podido con dos niveles
y no quiero usar javascript, es una tarea
gracias
este funciona bien en dos niveles pero en tres no se
me pueden decir que mejorar para que agarre el tercer nivel

ah se me olvido debe ser horizontal como este
ya que he encontrado vertical, pero por mas que trato no puedo
____________________________________________



Código PHP:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. <!--
  8. *{ padding:0px; margin:0px;}
  9. .contenedor { width:100%; background-color: #0000FF;}
  10. .contenedor2 { width:600px; background: #333333; margin:auto;  }
  11. .cuerpo{ height:500px;background: #003300;}
  12.  
  13. /*menu pero no he podido de tres niveles pero desde aqui empieza*/
  14. ul {
  15. background-color: #FFFF33 ;
  16. list-style-type: none;
  17. text-align: center;
  18. }
  19. .menu ul li{
  20. background-color: #009900;
  21. display: inline;
  22. float: left;
  23. width:120px;
  24. }
  25. .menu ul li:hover{
  26. background-color: #CCCCCC;
  27. display: inline;
  28. float: left;
  29. width:120px;
  30. }
  31. .menu li ul{
  32. display: none;
  33. position: relative;
  34. left: 0;
  35. top: 0px;
  36. }
  37. .menu li:hover ul{
  38. display: block ;
  39. position: relative;
  40. left: 0;
  41. top: 0px;
  42. }
  43. -->
  44. </style>
  45. </head>
  46.  
  47. <body>
  48. <div class="contenedor">
  49. <div class="contenedor2">
  50.  
  51. <div class="menu">
  52. <ul>
  53.     <li>home<ul>
  54.              <li>jorge  </li>
  55.              <li>jorge  </li>
  56.              <li>jorge  </li>
  57.              </ul>
  58.     </li>
  59.     <li>productos</li>
  60.     <li>local</li>
  61.     <li>diseno</li>
  62.     <li>mapa</li>
  63. </ul>
  64. </div>
  65.  
  66.  
  67. <div class="cuerpo">  </div>
  68.  
  69.  
  70. </div>
  71. </body>
  72. </html>

Última edición por jor_0203; 05/11/2011 a las 04:14