Tema: menu desplegable adaptado al qe tengo?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/08/2010, 09:11
mysterio069
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 14 años
Puntos: 0
menu desplegable adaptado al qe tengo?
Hola a todos!

Vereis, he estado buscando mucho por el foro y tal y he intentado adaptar mi menu superior a un menu desplegable verticalmente, pero han sido intentos fallidos y ya no me aclaro con el jaleo que tengo, me podeis ayudar?

os dejo el codigo HTML del menu y el CSS tambien
Código HTML: 
Ver original
  1. <div id="header">
  2. <div id="menu">
  3.  
  4.         <ul class="desplegable">
  5.  
  6.             <li ><a href="index.php?<?php echo session_name()."=".session_id()?>" >Inicio</a></li>
  7.  
  8.             <li ><a href="#"  >El colegio</a>
  9.             <ul><li>loquesea</li></ul></li>
  10.  
  11.             <li ><a href="#" >Empleo</a></li>
  12.  
  13.             <li ><a href="noticias.php?<?php echo session_name()."=".session_id()?>" >Noticias</a></li>
  14.  
  15.             <li ><a href="#" >Alertas</a></li>
  16.             <li ><a href="#" >Receta XXI</a></li>
  17.             
  18.  
  19.         </ul>
  20.         <div id="buscador">
  21.             <ul>
  22.             <li >Buscar</li>
  23.             <li ><form name="buscador" action="" method="POST">
  24.             <input type="text" name="s" id="s" size="15" value="" /></li>
  25.             <li> <input type="button" name="n" id="botonb" size="15" value="Buscar" /> </li>
  26.             </ul>
  27.             </div>
  28.  
  29.         
  30.  
  31.     </div>
  32.  
  33.     
  34.  
  35. </div>

Código CSS: 
Ver original
  1. #menu {text-align: center;
  2.  
  3.     width: 1000px;
  4.  
  5.     margin: 0 auto;
  6.  
  7.     padding: 0;
  8.  
  9.     height: 50px;
  10.  
  11.     background: url(images/img02m.jpg) no-repeat left top;
  12.  
  13. }
  14.  
  15.  
  16.  
  17. #menu ul {
  18.  
  19.     margin: 0;
  20.  
  21.     padding: 0;
  22.  
  23.     list-style-type: none;
  24.  
  25. }
  26.  
  27.  
  28.  
  29. #menu li {
  30.  
  31.     display: inline;
  32.  
  33. }
  34.  
  35.  
  36.  
  37. #menu a {
  38.  
  39.     display: block;
  40.  
  41.     float: left;
  42.  
  43.     height: 25px;
  44.  
  45.     margin: 0;
  46.  
  47.     padding: 15px 20px 0 25px;
  48.  
  49.     text-decoration: none;
  50.  
  51.     text-transform: capitalize;
  52.  
  53.     background: url(images/img03m.jpg) no-repeat right top;
  54.  
  55.     font-family: Georgia, "Times New Roman", Times, serif;
  56.  
  57.     font-size: 11px;
  58.  
  59.     color: #FFFFFF;
  60.     position: relative;
  61.  
  62. }
  63.  
  64.  
  65.  
  66. #menu .current_page_item a {
  67.  
  68.     color: #FFFFFF;
  69.  
  70. }
  71. /* Buscador */
  72.  
  73. #buscador{
  74.     float:right;
  75.     margin-right: 20px;
  76. }
  77.  
  78.  
  79. #buscador li {
  80.  
  81.     display: inline;
  82.  
  83.     float: left;
  84.  
  85.     height: 25px;
  86.  
  87.     margin-left: 0;
  88.  
  89.     padding: 15px 0px 0 20px;
  90.  
  91.     text-decoration: none;
  92.  
  93.     text-transform: capitalize;
  94.  
  95.     font-family: Georgia, "Times New Roman", Times, serif;
  96.  
  97.     font-size: 12px;
  98.  
  99.     color: #FFFFFF;
  100.     position: relative;
  101.  
  102. }
  103.  
  104.  
  105.  
  106.  
  107. /* Desplegable */
  108. .desplegable{
  109.     font-family: Georgia, "Times New Roman", Times, serif;
  110.  
  111.     font-size: 11px;
  112.  
  113.     color: #FFFFFF;
  114.     text-decoration: none;
  115.  
  116.     text-transform: capitalize;
  117.     text-align: center;
  118.  
  119.     
  120. }
  121.  
  122. ul.desplegable
  123. {
  124.    list-style:none;
  125. }
  126. ul.menu li
  127. {
  128.    position:relative; 
  129.    width:70px;
  130. }
  131. ul.desplegable ul /* Para todos los ul debajo del ul.menu */
  132. {
  133.    display:none;
  134.    list-style:none;
  135. position:absolute; 
  136.     
  137.    
  138. } 
  139. ul.desplegable li:hover > ul
  140. {
  141.    display:block;
  142. }
  143.  
  144. ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
  145. {
  146.    position:absolute;
  147.    left:-41px;
  148.    top:19px;
  149.    display:none;
  150.    list-style:none;
  151. }
  152. ul.menu > li /* Sólo para li de primer nivel */
  153. {
  154.    display:inline;
  155. }

Seguro qe hay cosas con las que os pondreis las manos en la cabeza pero esque son copy and paste de otros menus

MUCHAS GRACIAS DE ANTEMANO!!