Foro de elhacker.net

hola

estoy haciendo un menú con css y html

Html:

<nav id="menu">
               
                        <ul>
                       
                          <li class="op1"><a href="#">Opción 1</a>
                       
                            <ul>
                                <li><a href="#">Opción 1.1</a></li>
                                <li><a href="#">Opción 1.2</a></li>
                            </ul>
                       
                          </li>
                         
                        </ul> 
               
               
</nav>


-----------------------------------------------------------------------------------

Css:

#menu {
text-align: center;
font-size: 0.8em;
max-width:1000px;

z-index:99999;
border:1px solid #FF0000;
position:relative;


}



nav li{

   display:inline;
   
   


}

nav li a {
   position: relative;
   width: 110px;
   height: 29px;
   display: block;
   background:#FFFFFF;
   
   color: #44403b;
   text-decoration: none;
   font-size: 14px;
   padding-top: 12px;
   text-align: left;
   padding-left: 30px;
   font-weight: bold;
}

nav li ul li{

   display:none;


}

nav li:hover ul li{

   display:block;
   z-index:99999;
   position:relative;
   

}


---------------------------------------------------------------------

El problema que tengo es que cuando hago el hover en el menú, al desplegarse este el fondo de mi pagina web ( el cual es una galería ) se desplaza hacia abajo así como lo muestran las imágenes en los link a continuación:

http://www.roliagroup.com/doctorhenriquez.com/img1.jpg

http://www.roliagroup.com/doctorhenriquez.com/img2.jpg


Si alguien me pudiese ayudar se lo agradeceria

Creo que lo que te falta es agregar esto

#menu ul { list-style:none; margin: 0; padding: 0;}

no despliega aun el menu...

alguien que me ayude por favor

Hola,

En vez de aplicar el display:none y display:block a los LI aplicalos al UL. Y en vez de aplicar position:relative al li debes aplicarle absolute para que no se tome en cuenta a la hora de posicionarlo en la pagina. O sea, esto:

nav li ul li{
   display:none;
}
 
nav li:hover ul li{
   display:block;
   z-index:99999;
   position:relative;
}

Pasa a ser esto:

nav li ul {
   display:none;
}
 
nav li:hover ul {
   display:block;
   z-index:99999;
   position:absolute;
}

PD: Cuesta mucho poner las etiquetas entre [code=css][/code] o [code=html4strict][/code] ? Es que en serio.. parece que lo haces a propósito.. recuerda que nos ayudas a leer mejor el código.. y a darte una respuesta..

Saludos