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
<li ><a href="index.php?<?php echo session_name()."=".session_id()?>" >Inicio
</a></li>
<li ><a href="#" >El colegio
</a>
<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>
<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>
Código CSS:
Ver original#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!!