menu desplegable adaptado al qe tengo?

[mysterio069]

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:

<div id="header">
<div id="menu">
 
        <ul class="desplegable">
 
            <li ><a href="index.php?<?php echo session_name()."=".session_id()?>" >Inicio</a></li>
 
            <li ><a href="#"  >El colegio</a>
            <ul><li>loquesea</li></ul></li>
 
            <li ><a href="#" >Empleo</a></li>
 
            <li ><a href="noticias.php?<?php echo session_name()."=".session_id()?>" >Noticias</a></li>
 
            <li ><a href="#" >Alertas</a></li>
            <li ><a href="#" >Receta XXI</a></li>
            
 
        </ul>
        <div id="buscador">
            <ul>
            <li >Buscar</li>
            <li ><form name="buscador" action="" method="POST">
            <input type="text" name="s" id="s" size="15" value="" /></li>
            <li> <input type="button" name="n" id="botonb" size="15" value="Buscar" /> </li>
            </ul>
            </div>
 
        
 
    </div>
 
    
 
</div>
 

Código CSS:

#menu {text-align: center;
 
    width: 1000px;
 
    margin: 0 auto;
 
    padding: 0;
 
    height: 50px;
 
    background: url(images/img02m.jpg) no-repeat left top;
 
}
 
 
 
#menu ul {
 
    margin: 0;
 
    padding: 0;
 
    list-style-type: none;
 
}
 
 
 
#menu li {
 
    display: inline;
 
}
 
 
 
#menu a {
 
    display: block;
 
    float: left;
 
    height: 25px;
 
    margin: 0;
 
    padding: 15px 20px 0 25px;
 
    text-decoration: none;
 
    text-transform: capitalize;
 
    background: url(images/img03m.jpg) no-repeat right top;
 
    font-family: Georgia, "Times New Roman", Times, serif;
 
    font-size: 11px;
 
    color: #FFFFFF;
    position: relative;
 
}
 
 
 
#menu .current_page_item a {
 
    color: #FFFFFF;
 
}
/* Buscador */
 
#buscador{
    float:right;
    margin-right: 20px;
}
 
 
#buscador li {
 
    display: inline;
 
    float: left;
 
    height: 25px;
 
    margin-left: 0;
 
    padding: 15px 0px 0 20px;
 
    text-decoration: none;
 
    text-transform: capitalize;
 
    font-family: Georgia, "Times New Roman", Times, serif;
 
    font-size: 12px;
 
    color: #FFFFFF;
    position: relative;
 
}
 
 
 
 
/* Desplegable */
.desplegable{
    font-family: Georgia, "Times New Roman", Times, serif;
 
    font-size: 11px;
 
    color: #FFFFFF;
    text-decoration: none;
 
    text-transform: capitalize;
    text-align: center;
 
    
}
 
ul.desplegable
{
   list-style:none;
}
ul.menu li
{
   position:relative; 
   width:70px;
}
ul.desplegable ul /* Para todos los ul debajo del ul.menu */
{
   display:none;
   list-style:none;
position:absolute; 
    
   
} 
ul.desplegable li:hover > ul
{
   display:block;
}
 
ul.menu> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
   position:absolute;
   left:-41px;
   top:19px;
   display:none;
   list-style:none;
}
ul.menu > li /* Sólo para li de primer nivel */
{
   display:inline;
}
 

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!!

[masterojitos]

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

[mayid]

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:

* {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.

[jomaruro]

Hola:

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

Saludos.