Tema: menu desplegable
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/12/2011, 09:55
miriamgomez
 
Fecha de Ingreso: abril-2008
Mensajes: 348
Antigüedad: 16 años, 1 mes
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>