Jak zrobić menu wielopoziomowej w html i css

Witam,

Chcę zrobić menu wielopoziomowe. Mój kod:

<nav id="menu">    
    <ul class="menu">
    <li><a href="/sport.php">Sport</a>
            <ul>
                <li><a href="">Test1</a></li>
                <li><a href="">Test1</a></li>
                <li><a href="">Test1</a></li>
                
                <ul class="navigation-2">     
                    <li class=""><a href="">Test2</a></li>
                    <li class=""><a href="">Test2</a></li>
                    <li class=""><a href="">Test2</a></li>
                    <li class=""><a href="">Test2</a></li>                
                </ul>        
            </ul>
    </li>
    </ul>
</nav>
 

Do tego mam kod prosty kod CSS. Jak dorobić teraz kod CSS, żeby wysuwało się to drugie menu navigation-2? W najprostszy sposób, bez JS tylko CSS.
Na czym ma polegać algorytm takiego menu? Nie wiem od czego zacząć. Nie chodzi mi o gotowce z internetu. Chcę zrozumieć jak to działa i napisać cssy.

Może to pomoże http://anfo.pl/blog/rozwijane_menu/

przede wszystkim podmenu <ul> powinno zawierać się w <li> do którego należy :P
reszta to już selektory css (głównie selektor dziecka >)

Dzięki @mr_jaro już napisałem. Idealny artykuł do zrozumienia mechanizmu menu wielopoziomowego/rozwijanego.