Foros del Web » Creando para Internet » CSS »

menu desplegable adaptado al qe tengo?

Estas en el tema de menu desplegable adaptado al qe tengo? en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 31/08/2010, 10:11
 
Fecha de Ingreso: abril-2010
Mensajes: 62
Antigüedad: 7 años, 8 meses
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!!
  #2 (permalink)  
Antiguo 31/08/2010, 11:23
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: menu desplegable adaptado al qe tengo?

tienes un mal concepto de como se debe utilizar las listas "ul y li".

Te dejo este link, te ayudara de mucho: http://www.cristalab.com/curso-html/listas/

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #3 (permalink)  
Antiguo 31/08/2010, 12:21
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: menu desplegable adaptado al qe tengo?

Yo no lo veo tan errado. Y el ejemplo me parece similar a los de desarrolloweb.com

El tema de hacer menues es dificil. Hay algunos aquí en el foro:

Lo que sí, yo encabecería todo con esto, para no estar repitiendo codigo:
Cita:
* {margin: 0; padding: 0; border: 0; outline: none;}
body{ font-family: Georgia, "Times New Roman", Times, serif; }

a{ text-decoration: none; font-size: 11px; color: #FFFFFF; }
ul { text-transform: capitalize; text-align: center; }
List-style no es necesario porque al hacer display-inline ya se borran los marcadores.

Segundo, en el codigo que publicaste estas usando una class .menu que ya no existe (la habrás borrado): ul.menu

No tengo tiempo ahora para terminar de ajustarlo, pero te recomiendo uses uno de los que te pasó @masterojitos.
  #4 (permalink)  
Antiguo 31/08/2010, 15:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: menu desplegable adaptado al qe tengo?

Hola:

Y también los ejemplos que aparecen en las FAQ's de CSS en este mismo foro.

Saludos.


Etiquetas: desplegable, adaptador
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 03:35.