Foros del Web » Creando para Internet » CSS »

menu desplegable

 Estas en el tema de menu desplegable en el foro de CSS en Foros del Web. hola, tengo el siguiete codigo que muestra un menu despleglabe. Pero los bloques se "descuelgan" hacia abajo. Se podria hacer que se habran Hacia abajo, ...
  #1 (permalink)  
Antiguo 20/12/2011, 09:55
 
Fecha de Ingreso: abril-2008
Mensajes: 348
Antigüedad: 16 años
Puntos: 1
menu desplegable
hola, tengo el siguiete codigo que muestra un menu despleglabe.

Pero los bloques se "descuelgan" hacia abajo.

Se podria hacer que se habran Hacia abajo, pero muestren las opciones en horizontal?

Código HTML: 
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=iso-8859-1" />
  5. <title>Probando Menu Horizontal Desplegable</title>
  6.  
  7. <style type="text/css">
  8. body {
  9.     font-family: Arial, Helvetica, sans-serif;
  10.     margin: 0;
  11.     padding: 0;
  12.     }
  13. #marco {
  14.     width:455px;
  15.     margin:10px 0;
  16.     padding:0px;
  17.     text-align:left;
  18.     }
  19.  
  20. /*Credits: CSSplay */
  21. /*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
  22. .preload2 {background: url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  23. .menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/fd_menu.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
  24. .menu2 li.top {display:block; float:left; position:relative;}
  25. .menu2 li a.top_link {display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#333; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
  26. .menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
  27. .menu2 li a.top_link span.down {float:left; display:block; padding:0 10px 0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
  28. .menu2 li a.top_link:hover {color:#fff;  background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  29. .menu2 li a.top_link:hover span { background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif)}
  30. .menu2 li a.top_link:hover span.down { background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif)}
  31.  
  32. .menu2 li:hover > a.top_link {color:#fff; background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  33. .menu2 li:hover > a.top_link span {background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  34. .menu2 li:hover > a.top_link span.down {background:url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/button4a.gif);}
  35.  
  36.  
  37. .menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
  38.  
  39. /* Default link styling */
  40.  
  41. /* Style the list OR link hover. Depends on which browser is used */
  42.  
  43. .menu2 a:hover {visibility:visible;}
  44. .menu2 li:hover {position:relative; z-index:200;}
  45.  
  46. /* keep the 'next' level invisible by placing it off screen. */
  47. .menu2 ul, 
  48. .menu2 :hover ul ul, 
  49. .menu2 :hover ul :hover ul ul,
  50. .menu2 :hover ul :hover ul :hover ul ul,
  51. .menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
  52.  
  53. .menu2 :hover ul.sub {left:6px; top:25px; background: #fff; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;}
  54. .menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #005FB9; border-left:1px solid #005FB9; border-right:1px solid #005FB9; margin-bottom:0;}
  55. .menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#005FB9; text-decoration:none;}
  56. .menu2 :hover ul.sub li a.fly {background:#fff  url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/vineta_menu.gif) no-repeat 150px 6px;}
  57. .menu2 :hover ul.sub li a:hover {background:#000000; color:#ffffff;}
  58. .menu2 :hover ul.sub li a.fly:hover {background:#000000 url(http://www.luisangelcamargo.com/wp-content/uploads/2007/12/vineta_menu.gif) no-repeat 150px 6px;}
  59. .menu2 :hover ul li:hover > a.fly {background:#E5FAFC} 
  60.  
  61. .menu2 :hover ul :hover ul,
  62. .menu2 :hover ul :hover ul :hover ul,
  63. .menu2 :hover ul :hover ul :hover ul :hover ul,
  64. .menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
  65. {left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
  66. .menu2 :hover ul.sub li ul {border-top:1px solid #005FB9; background: #fff; z-index:300;}
  67. </style>
  68. </head>
  69. <body>
  70. <div id="marco">
  71. <span class="preload2"></span>
  72. <!--MENU-->
  73. <ul class="menu2"><img src="http://www.luisangelcamargo.com/wp-content/uploads/2007/12/menu_izq.gif" align="left" /><img src="http://www.luisangelcamargo.com/wp-content/uploads/2007/12/menu_der.gif" align="right"/>
  74.  
  75. <li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
  76.  
  77. <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  78. <ul class="sub">
  79. <li><a href="#">Link 1.1</a></li>
  80. <li><a href="#">Link 1.2</a></li>
  81. <li><a href="#">Link 1.3</a></li>
  82. <li><a href="#">Link 1.4</a></li>
  83. </ul>
  84. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  85. </li>
  86.  
  87. <li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
  88. <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  89.  
  90. <ul class="sub">
  91. <li><a href="#">Link 2.1</a></li>
  92. <li><a href="#">Link 2.2</a></li>
  93. <li><a href="#">Link 2.3</a></li>
  94. <li><a href="#">Link 2.4</a></li>
  95. </ul>
  96. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  97. </li>
  98.  
  99. <li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
  100. <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  101. <ul class="sub">
  102.  
  103. <li><a href="#">Link 3.1</a></li>
  104. <li><a href="#">Link 3.2</a></li>
  105.  
  106. <li class="mid"><a href="#" class="fly">Link 3.3
  107. <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  108. <ul>
  109. <li><a href="#">Link 3.3.1</a></li>
  110. <li><a href="#">Link 3.3.2</a></li>
  111. <li><a href="#">Link 3.3.3</a></li>
  112. <li><a href="#">Link 3.3.4</a></li>
  113. </ul>
  114.  
  115. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  116. </li>
  117.  
  118. <li class="mid"><a href="#" class="fly">Link 3.4
  119. <!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
  120. <ul>
  121. <li><a href="#">Link 3.4.1</a></li>
  122. <li><a href="#">Link 3.4.2</a></li>
  123. <li><a href="#">Link 3.4.3</a></li>
  124. <li><a href="#">Link 3.4.4</a></li>
  125. </ul>
  126. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  127. </li>
  128.  
  129. </ul>
  130. <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  131. </li>
  132.  
  133. </ul>
  134. <!-- FIN MENU-->
  135. </div>
  136. </body>
  137. </html>
  #2 (permalink)  
Antiguo 20/12/2011, 10:06
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años
Puntos: 116
Respuesta: menu desplegable
Q tal este ejemplo:
http://www.araudi.net/Desplegables/m...plegable2.html

Solo ve el codigo fuente, para ver como se hizo (:
Saludos.
__________________
Programador jQuery & PHP
  #3 (permalink)  
Antiguo 20/12/2011, 12:02
 
Fecha de Ingreso: abril-2008
Mensajes: 348
Antigüedad: 16 años
Puntos: 1
Respuesta: menu desplegable
Hola, si justo asi, pero necesitaria un nivel mas dentro del desplegable, vamos un sub-dentro del submenu
  #4 (permalink)  
Antiguo 20/12/2011, 12:13
 
Fecha de Ingreso: abril-2008
Mensajes: 348
Antigüedad: 16 años
Puntos: 1
Respuesta: menu desplegable
He estado revisando la pagina donde esta el menu, y seria este que comentampos pero "mezcladolo" con el ejemplo12
  #5 (permalink)  
Antiguo 20/12/2011, 12:22
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años
Puntos: 116
Respuesta: menu desplegable
y qué, lo haráz?
o querrás una "ayuda" (que te lo hagan)?.
__________________
Programador jQuery & PHP
  #6 (permalink)  
Antiguo 20/12/2011, 12:27
 
Fecha de Ingreso: abril-2008
Mensajes: 348
Antigüedad: 16 años
Puntos: 1
Respuesta: menu desplegable
Estoy en ello, pero cualquier ayudara se pagara con un gracias

Etiquetas: desplegable, hover, html, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:18.