[SOLUCIONADO] menu vertical, desplazamiento de elementos no deseado

[guardarmicorreo]

Estoy creado un menú vertical.

Creo que lo tengo todo bien, pero hay un problema que no sé detectar.

Este es el menú



Como se puede ver, al pasar el puntero para abrir un submenú, el resto de <li> del menú principal de la izquierda se desplazan hacia abajo.

Es un problema que no sé resolver.

¿Cómo podría hacerlo?

He creado el siguiente HTML y CSS y he realizado varias pruebas, pero ninguna logra evitar ese desplazamiento.

menu.html

Código HTML:

<div id="menu">
            <ul class="menu">
                <li><a href="">Inicio</a></li>
                <li>
                                    <p>uno</p>
                                    <ul>
                                            <li><a href="">otro</a></li>
                                            <li><a href="">otro</a></li>
                                            <li><a href="">otro</a></li>
                                    </ul>
                </li>
                <li><a href="">otro</a></li>
                <li><a href="">otro</a></li>
                                <li>
                                    <p>otro</p>
                                    <ul>
                                            <li><a href="">otro1</a></li>
                                            <li><a href="">otro2</a></li>
                                            <li><a href="">otro3</a></li>
                                    </ul>
                </li>
            </ul>
        </div>
 

menu.css

Código CSS:

*{
    margin:0px;
}
 
#menu{
    position:fixed;
    display:block;
    float:left;
    width:10%;
    
    border-top:solid hsl(210, 100%, 55%) 5px;
}
 
ul, ol{
    list-style: none;
    
    border:solid black 1px;
}
 
.menu>li{
    display:block!important;
    position:relative;
    width:100%;
}
 
.menu li ul{
    display:none;
}
 
.menu li:hover >ul{
    display:inline-block;
    
    position:relative;
    
    float:left;
    
    width:100%;
 
    margin-top:-30%;
    margin-left:100%;
    
    border:solid red 1px;
}
 
/*define el estilo de los enlaces*/
 
.menu a:first-letter, p:first-letter{
    color:hsl(210, 100%, 55%);
    font-weigth:bold;
}
 
.menu li a, p{
    display:block;
 
    padding: 10px 15px;
 
    margin:0%;
    margin-top:0px;
 
    border:hidden;
    border:solid transparent 1px;
 
    background-color:#e5e5e5;
    color:#515151;
}
 
.menu a:link{
    color:#515151;
    text-decoration:none;
}
 
.menu a:visited{
    color:#515151;
    text-decoration:none;
}
 
.menu a:hover, p:hover{
    border-right:solid #515151 1px;
    border-left:solid #515151 1px;
 
    background-color:#515151;
 
    color:white;
}
 

[Zeromm]

Dejalo así

.menu li:hover > ul{
display:block;

position:absolute;


width:100%;

margin-top:-30%;
margin-left:100%;

border:solid red 1px;
}

[guardarmicorreo]

:O funcionó a la primera.

¿Cual era el problema? Veo que cambiaste el display y el position, pero no entiendo por qué :S

Si me lo podrías explicar por favor.

Gracias!!

[pzin]

Iniciado por guardarmicorreo

¿Cual era el problema? Veo que cambiaste el display y el position, pero no entiendo por qué :S

Si me lo podrías explicar por favor.

Ayúdame a hacerlo por mi mismo.

Uhmmm...

Lee sobre cómo funciona el posicionamiento: http://librosweb.es/css/capitulo_5/posicionamiento.html

[Zeromm]

Con el "position absolute" el objeto sale del flujo del diseño y no ocupa espacio real en relación al resto de elementos. Si le pones "relative" si ocupa espacio entre los elementos, por eso se bajaban.

Saqué el float porque con el absolute no funciona.

[guardarmicorreo]

ahhh ahora entiendo.

muchas gracias por tu ayuda!! :D