Menu despegable CSS

Tecktonikrazy · #1 (**permalink**) 29/04/2010, 07:49

Hola, tengo el siguiente menu css:

Código CSS:

Ver original#menu ul {
padding: 0px;
margin: 0px;
background: url(imagen.jpg) repeat-x;
font-size: 14px;
font-weight: bold;
width: 100%;
float: left;
font-family:"Trebuchet MS", Tahoma, Verdana, Helvetica, Arial;
}
 
 
#menu ul li {
display: inline;
}
 
#menu ul li a:link, #menu ul li a:visited {
background: url(imagen.jpg) left top 
 
no-repeat;
color: #FFF;
padding-left:50px;
float: left;
text-decoration: none;
display:block;
margin:0 0px;
}
 
#menu ul li a span{
padding:10px 50px 10px 0;
line-height:24px;
display:block;
background: url(imagen.jpg) right top 
 
no-repeat;
}
 
#menu ul li a:hover, #menu ul li a:active{
color: #FFF;
background: url(imagen.jpg) left bottom 
 
no-repeat;
}
 
#menu ul li a:hover span, #menu ul li a:active span{
background: url(imagen.jpg) right bottom 
 
no-repeat;
}

Eso va en el Head, y cada vez que quiero poner un nuevo enlace con ese menu utilizo:

Código HTML:

<div id="menu">
            <ul>
                <li>
                    <a href="/home"><span>HOME</span></a>
                </li>

                <li>
                    <a href="/news"><span>NEWS</span></a>
                </li>

                <li>
                    <a href="/imagenes"><span>IMAGENES</span></a>
                </li>
            </ul>
        </div>

Funciona a la perfeccion, pero lo que quiro saber es como hago para que al pasar el mouse por el de "IMAGENES" por ejemplo, aparesca un submenu despegable vertical con subpaginas o categorias, no quiero ningun efecto al desplegarse ni nada, solo lo mas basico y poderle cambiar el color de fondo, no se nada de css, ese menu lo saque de un tutorial xD bueno espero que me puedan ayudar

alexk · #2 (**permalink**) 29/04/2010, 08:22

aqui tienes ejemplos de menus desplegables...

fprieto · #3 (**permalink**) 29/04/2010, 08:23

Que mas men esta pagina siempre me ha servido mucho a la hora de hacer mis menus desplegables ahi le explican como hacerlo ok y ese menu desplegable es facil de usar y tiene subopciones.

http://www.chuidiang.com/css/ejemplos/menu_desplegable_css.php

algo que le recomiento en caso de que no le funcione en IE es poner lo siguiente antes de la etiqueta <html> del index o de la pagina donde valla a hacer su menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

y su eqtiqueta <html> reemplacela por esto:
<html xmlns="http://www.w3.org/1999/xhtml">

[URL="http://www.laestacionmusic.com"]Escucha[/URL] la mejor [URL="http://www.laestacionmusic.com"]Musica [/URL]en [URL="http://www.laestacionmusic.com"]Internet[/URL]

sarmiman · #4 (**permalink**) 30/04/2010, 19:11

Cita:

Iniciado por alexk

aqui tienes [URL="http://www.araudi.net/ejemplos/menus_desplegables_CSS.html"]ejemplos de menus desplegables[/URL]...

Tengo una pregunta, se podrian insertar imagenes a la perfeccion en ese tipo de menus?¿ osea con imagen de sustitucion y todo?¿ Lo he probado de todo tipo y nunca queda perfecto. Gracias

alexk · #5 (**permalink**) 30/04/2010, 19:31

claro... no hay problema... si quieres mas ejemplos pasa por las FAQS... de este mismo foro

javierpelegrini · #6 (**permalink**) 01/05/2010, 21:40

Muy bueno, se agradece el enlace.