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;
}