Menu horizontal con dropdown horizontal css+js

[sys73r]

Hola, y gracias por leer el tema.


LEs cuento que he tratado de implementar un menu similar al de desarrolloweb.com (menu superior de aletas), he copiado el codigo y algunas opciones de ejemplo pero no logro el resultado.

aqui hay un ejemplo de lo que yo he hecho:

soluciones-informaticas.cl/tests/menu.php

Mi problema es que cuando al pasar por cada opcion de menu1,menu2 etc los submenus no aparecen en la misma posicion si no que aparecen en la misma posicion en la cual se encuentran dentro del HTML.


Cualquier sugerencia es bienvenida.

Gracias.

[AlvaroG]

El problema es que estás usando propiedad "visibility" de css cuando lo que corresponde es usar "display".
Visibility solamente hace invisible al elemento, pero el espacio que ocupa sigue ahí, mientras que display directamente no genera la caja correspondiente.

Entonces lo que para mí tenés que hacer es cambiar las clases "ancla" y "cenlaces", sustituyendo "visibility : visible" por "display : block" y "visibility : hidden" por "display : none"


Saludos.

[AlvaroG]

mirá, analizando tu código me di cuenta de que lo que te comenté no te sirve, ya que se está usando "visibility" EN LA BIBLIOTECA CSS que estás importando.

Así que la respuesta anterior es inútil. La solución va por otro lado...


Revisando el código de la hoja de estilos de desarrolloweb, creo que llegué al punto importante:

los elementos de clase "cenlaces" se posicionan de forma ABSOLUTA, y se ubican exactamente en donde luego deben aparecer, fijate:

Código:

.cenlaces {
position:absolute;
width: 765px;
top: 100px;
left:0px;
visibility:hidden;
font-size:8pt;
font-family : verdana,arial,helvetica;
font-weight: bold;
color : #333333;
background-color:#F6F6FF;
padding-top:1px;
padding-bottom:1px;
padding-left:3px;
clip: rect(0,765,16,0);
text-align:left;
}

Así se evita que ocupen más espacio del necesario, es ahí donde está la diferencia con lo que vos estás haciendo, y es eso lo que tenés que agregar a tu hoja de estilos. (no exactamente igual, claro, pero adaptándolo)


Saludos.

[sys73r]

Gracias, voy a probar y te comento como me fué!