Menu con transicion

Este es solo un menu desplegable de prueba, espero que te sirva en tu proyecto.

Se utilizo la propiedad transition con la cual se cambio la propiedad width de un valor 0 a uno de 70%.

Tambien se cambio la propiedad display de grid a block para que no desordene los demas blockes.

La posicion se dio como absoluta

               
#menu li ul {
 display:grid; 
 width:0%;
 transition:width 3s;
 }
 
#menu li:hover ul{
 position:absolute;
 height:90%;
 width:70%;
 background-color:rgba(81,90,90,0.9);
 color:#ffffff;
 border-bottom:2px solid #fff;
 list-style-type:none;
 padding:10px 5px 10px 0;
 display:block;
 }

Menu desplegable