Rozwijane menu w Bok

[Boshi]

Cześć, jestem nowy na waszym forum, dlatego chcę się na powitanie przywitać.

Teraz do rzeczy: ćwiczę sobie css+HTML. Napisałem stronkę z menu, ale doszedłem do wniosku, że przydało by mi się rozwijane menu na boki lub w dół.

Jak mogę to zmodernizować? Próbowałem na wiele sposobów, jedna za żadne skarby nie mogę nic wymśleć

Tak wygląda css menu

Kod:

#menu{
float:left;
background-color:black;
width:200px;  
padding:0;

border-radius:25px;
border-right:2px solid red;
margin-top:4px;


}




ul li {
border:1px solid #660000;



}



ul>li:first-child
{
  border-top:none;
  
  
}

ul li a
{
    display:block;
    font-size:1em;
    color:white;
    text-decoration:none;
    text-align:center;
    padding:2px;
    cursor:pointer;
    transition-duration:200ms;
    
    transition-timing-function:linear;
        
    }
    
    ul li a:visited{
    color:white;
    }
    ul li a:active{
     color:blue;
    }
    
    ul li a:hover{
    background-color:#800;
    margin-left:2px;
    border-radius:30px;
    box-shadow:0 0 4px 3px white ;
    }
    
a:hover{
color:white;
    }

A tak HTML

Kod:

<div id="menu">
<!-- przygotowanie menu poziomego ulozonego po lewej stronie strony-->
    <ul>
     <li><a href="index.html"><p>Strona główna</p></a></li>
     <li><a href=""><p>modele</p></a>
     <ul>
       <li><a href="index.html"><p>link1</p></a></li>
       <li><a href="index.html"><p>link2</p></a></li>
       <li><a href="index.html"><p>link3</p></a></li>
     </ul>
     </li>
     <li><a href="#"><p>galeria</p></a></li>
     <li><a href="kontakt.html"><p>kontakt</p></a></li>
    </ul>
    </div>