¿Código para un desplegable?

[Linton]

Hola, ¿podéis ayudarme a meter un desplegable en el menú? Quiero que al pasar el cursor sobre algunas palabras aparezca la doble opción Woman - Man (es una web de diseño de moda).

Esas dos opciones ya enlazarían a sus respectivas carpetas de fotos. Gracias, un saludo.

[cristian_cena]

Pasa por acá, tenes muchos menús. Si es simple éste ejemplo básico te puede servir.
Conste que tenía a mano ambos links. La próxima coloca algo de código.

Espero te sirva, saludos.

[Linton]

¡Muchas gracias, un saludo!

[Linton]

Hola Cristian, gracias de nuevo por tu ayuda. El colega que me estaba desarrollando la web ha quedado fuera de combate por un problema familiar, y aquí estoy chapoteando en mi ignorancia.

El menú está al pie y el desplegable debe abrirse hacia arriba, en vez de eso lo hace para abajo y además sólo puedo verlo si pulso F11. A ver si puedes decirme qué falla, gracias de antemano.



<div id="menu2">
<ul class="dropdown dropdown-horizontal">
<li><a href="#" class="amenu2">Home</a></li>
<li><a href="#" class="amenu2 dir">Baelo Claudia</a>
<ul>
<li><a href="#">Woman</a></li>
</ul>
</li>

<li><a href="#" class="amenu2 dir">Bandoleros</a>
<ul>
<li><a href="#">Woman</a></li>
</ul>
</li>
<li><a href="#" class="amenu2 dir">Accesories</a></li>
</ul>

[cristian_cena]

Ni idea, solo con el html no te puedo decir, pone el css y el js y lo vemos. Lo que si tenes un desastre ese html. fijate en principio de cerrar las etiquetas que vas abriendo. Seguro ahí te esta fallando.

[Linton]

¡Muchas gracias! No sé qué es el JS, aquí va el CSS:


#logo2 {margin:0% 0% -22% 3%}
#logo2 p {font-family:Copperplate Gothic Bold ; font-size:38px ; color:#733a1e}
#menu2 {margin:10% 0% 0% 0%}
#menu2 li {font-family:Century Gothic ; font-size:30px ; color:#534640 ; list-style:none ; display:inline ; margin:0% 0% 0% 3%}
#menu2 a {font-family:Century Gothic ; font-size:30px ; color:#534640 ; text-decoration:none}
#menu2 a:hover {font-family:Century Gothic ; font-size:30px ; color:#534640 ; text-decoration:none ; border-bottom: 1px dotted silver}
#contenidoiz {float:left}
.carruseldeimagenes {margin:10% 0% -8% 25%;}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin:0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
font-size:10px;
}

ul.dropdown ul li {
float: none;
font-size:10px;
font-face:Arial
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
font-size:10px;
font-face:Arial
}

ul.dropdown li:hover > ul {
visibility: visible;
font-size:10px;
font-face:Arial
}

[kevinvgp]

Iniciado por Linton

No sé qué es el JS

JS = JavaScript

[ZoroRoronoa]

el "Nivel" desplegable, tiene una posicion absoluta.

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
font-size:10px;

Es por eso que se va hacia abajo y no lo vez (tampoco sale el scroll o no crece la page)

Si el menu esta en el pie de la pagina, creo que no abra inconvenientes si cambias el valor de position a "relative".

Y asi, cuando salga el desplegable, la page crecera y podras ver el menu.
________________________________

Para que se abra hacia arriba, jugando con los relatives y absolutes, esta un poco mas dificultuso (pero no imposible).

Saludos.

[Linton]

¡Gracias a los dos, especialmente a ZoroRoronoa!

Aprovecho para preguntar otra cosilla: ¿puedo cambiar el tamaño de la letra del desplegable en esta parte, font-size:10px? Está al final de tu cita.

Saludos.

[ZoroRoronoa]

Iniciado por Linton

¡Gracias a los dos, especialmente a ZoroRoronoa!

Aprovecho para preguntar otra cosilla: ¿puedo cambiar el tamaño de la letra del desplegable en esta parte, font-size:10px? Está al final de tu cita.

Saludos.

Claro, ahi cambialo

Te dare un Tip:
1.- Usa notepad++ como editor
2.- Haz una copia (de respaldo) de tu archivo CSS
3.- Modifica los valores para que veas que valor pertenece a que (juega con los valores).

[kevinvgp]

http://www.youtube.com/watch?v=qSk5Q...deo&playnext=1

en ese video se explica como hacer un menu desplegable.
espero te sirba =D

[Linton]

¡Gracias amigos! Así da gusto, saludos y feliz año.