Foros del Web » Creando para Internet » CSS »

menu css 3er nivel??

Estas en el tema de menu css 3er nivel?? en el foro de CSS en Foros del Web. Hola! miren, encontre un menu desplegable en la web qe me vino de lujo! y lo edite a mis necesidades, el problema es que necesito ...
  #1 (permalink)  
Antiguo 04/10/2010, 10:36
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 7 años, 8 meses
Puntos: 0
menu css 3er nivel??

Hola!
miren, encontre un menu desplegable en la web qe me vino de lujo! y lo edite a mis necesidades, el problema es que necesito un tercer nivel de desplegable y no se como hacerlo, ya que no entiendo bien el comportamiento de algunas reglas css, les dejo el codigo tanto css como HTML, les agradeceria qe me dijesen que tengo que añadir al css o al HTML para poner un tercer nivel desplegable y si pueden explicarme por que tendria que poner eso (ya que no me gusta solo copiar y pegar, intento comprender :D )

Código HTML:
Ver original
  1. <div id="menu">
  2. <ul>
  3.     <li><h2>Navegacion</h2></li>
  4.   <li class="nivel1 primera"><a href="#" class="nivel1">Colegio</a>
  5.  
  6. <!--[if lte IE 6]><a href="#" class="nivel1ie">Colegio<table class="falsa"><tr><td><![endif]-->
  7.     <ul>
  8.         <li class="primera"><a href="#">Junta de Gobierno</a></li>
  9.     <ul>
  10.             <li><a href="#">Actual</a></li>
  11.             <li><a href="#">Anteriores</a></li>
  12.     </ul>
  13.         <li class="primera"><a href="#">Presentación</a></li>
  14.         <li><a href="#">Saluda Presidente</a></li>
  15.         <li><a href="#">Estatutos Colegiales</a></li>
  16.     </ul>
  17. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  18.   </li>
  19.   <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
  20.  
  21. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
  22.     <ul>
  23.         <li class="primera"><a href="#">Opción 2.1</a></li>
  24.         <li><a href="#">Opción 2.2</a></li>
  25.         <li><a href="#">Opción 2.3</a></li>
  26.         <li><a href="#">Opción 2.4</a></li>
  27.         <li><a href="#">Opción 2.5</a></li>
  28.  
  29.     </ul>
  30. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  31. </li>
  32.   <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
  33. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
  34.     <ul>
  35.         <li class="primera"><a href="#">Opción 3.1</a></li>
  36.         <li><a href="#">Opción 3.2</a></li>
  37.         <li><a href="#">Opción 3.3</a></li>
  38.  
  39.     </ul>
  40. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  41. </li>
  42.   <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
  43. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
  44.     <ul>
  45.         <li class="primera"><a href="#">Opción 4.1</a></li>
  46.         <li><a href="#">Opción 4.2</a></li>
  47.         <li><a href="#">Opción 4.3</a></li>
  48.  
  49.         <li><a href="#">Opción 4.4</a></li>
  50.     </ul>
  51. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  52. </li>
  53.   <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
  54. <!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
  55.     <ul>
  56.         <li class="primera"><a href="#">Opción 5.1</a></li>
  57.         <li><a href="#">Opción 5.2</a></li>
  58.  
  59.         <li><a href="#">Opción 5.3</a></li>
  60.     </ul>
  61. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  62. </li>
  63. </ul>
  64. </div>

Código CSS:
Ver original
  1. #menu {  
  2. float: left;
  3. text-align: left;
  4. font-size: 11px;
  5. width: 170px;
  6. font-family: Georgia, "Times New Roman", Times, serif;
  7. }
  8. #menu ul { list-style-type: none;
  9. margin: 0;
  10. padding: 0;
  11. }
  12. #menu ul li.nivel1 {
  13. width: 162px;
  14. }
  15.  
  16. #menu ul li.primera {
  17.  
  18. }
  19. #menu ul li a {display: block;
  20. text-decoration: none;
  21. color: #000000;
  22. background-color: #ffffff;
  23. border-bottom: solid 1px #812a55;
  24. border-top: none;
  25. padding: 8px;
  26. position: relative;
  27. }
  28. #menu ul li:hover {
  29. position: relative;
  30. background-color: #ffffff;
  31. color: #000;
  32. }
  33. #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #b25b86;
  34. color: #fff;
  35. position: relative;
  36. }
  37. #menu ul li a.nivel1 {display: block!important;display: none;
  38. position: relative;
  39. }
  40. #menu ul li ul {display: none;
  41. }
  42. #menu ul li a:hover ul, #menu ul li:hover ul {
  43. display: block;
  44. position: absolute;
  45. left: 161px;
  46. top:-1px!important;
  47. top: -31px;
  48. }
  49. #menu ul li ul li a {width: 160px;
  50. background-color: #d380a9;
  51. color: #000;
  52. }
  53. #menu ul li ul li a:hover {position: relative;
  54. background-color: #b25b86;
  55. color: #FFF;
  56. }
  57. #menu ul li ul li ul li a {width: 160px;
  58. background-color: #d380a9;
  59. color: #000;
  60. }
  61. #menu ul li ul li ul li a:hover {position: relative;
  62. background-color: #b25b86;
  63. color: #FFF;
  64. }
  65. table.falsa {
  66. border-collapse:collapse;
  67. border:0px;
  68. float: left;
  69. position: relative;
  70. }

Graciaass!!
  #2 (permalink)  
Antiguo 04/10/2010, 10:53
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: menu css 3er nivel??

Buenas, revisa estos ejemplos

http://www.araudi.net/ejemplos/menus...ables_CSS.html

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 04/10/2010, 11:37
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: menu css 3er nivel??

muchas gracias ya lo resolvi!!

Etiquetas: nivel
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 08:28.