problema menu

[kakashi20]

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

[pzin]

Tienes que posicionar el ul hijo, el que hace de submenú, de forma absoluta. Para que siga en relación al menú, el li que contenga a ese ul, posicionarlo de forma relativa.

Código CSS:

nav li { 
  position: relative;
}
 
nav li ul {
  position: absolute;
  /* Luego ajustas su posición con top, right, bottom y/o left */
}
 

Yo no soy muy de usar muchos ID's y clases, pero lo que sí deberías de hacer, es usar ese id del menú para referenciarlo en tus selectores, no vaya a ser que luego tengas otros elementos por ahí y que luego tomen esos estilos. Y también usar el selector > —hijo directo— para que, por ejemplo, los li's del submenú no se vean afectados por los estilos del padre. Algo así:

Código CSS:

nav#menu > li {}
nav#menu > li ul {}
 

Y, para otra vez, intenta usar highlight o code cuando publiques código.

[kakashi20]

hola Bonez

gracias por tu ayuda, funciono, el fondo no se desplaza pero me sale este inconveniete:

el contenedor id=menu no se expande asi como lo muestra la imagen

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


gracias por la ayuda

[kakashi20]

perdon, este es el link

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

[appeducacion]

Esta es una forma no del todo correcta, pero que te funciona. si quieres poner más Opciones 1.x, deberás de modificar el height del #menu:hover para que coja la medida adecuada.

Código CSS:

#menu:hover {
    height: 150px;
}
 

[kakashi20]

funciona, no seria practico, pero cuando hago eso el fondo ( que es una galeria ) se desplaza hacia abajo...

[kakashi20]

por favor alguien que me pueda ayudar..!!!

[pzin]

Empieza por quitar las posiciones relativas que no te hacen falta, que son casi todas, menos la que te indiqué.

[kakashi20]

ya las quite, pero me aparce este problema:

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

este es el codigo

html

Código 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>
                          
                          <li class="op1"><a href="#">Opción 2</a> 
                       
                            <ul> 
                                <li><a href="#">Opción 2.1</a></li> 
                                <li><a href="#">Opción 2.2</a></li> 
                            </ul> 
                        
                          </li> 
                                                    
                        </ul>  
               
               
                    </nav>
 

CSS

Código CSS:

#menu {
text-align: center;
font-size: 0.8em;
max-width:1000px;
height:auto;
z-index:99999;
border:1px solid #FF0000;
 
 
 
}
 
 
 
nav li{
 
    display:inline-block;
    
    
    
    
 
 
}
 
nav li a {
    
    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{
 
    position:absolute;
 
}
 
nav li ul li{
 
    display:none;
    position:relative;
    
    
 
 
}
 
nav li:hover ul li{
 
    display:block;
 
    
 
    
    
    
 
}
 

por favor alguien que me ayude..!!!