Positionnement menu responsive

Bonjour,
J'ai suivit le tutoriel suivant sur les menus responsive : lien

mon soucis est que lorsque je veux l'adapter en remplacant les 'a' par des 'li>a' le tout dans des 'ul' afin d'y mettre un menu et des sous-menus le menu responsive ne se positionne plus correctement.

Quelqu'un l'aurait-il déjà fait pour ce genre de menu ?

voilà mon code actuel :

<header>

                    <a href="#" class="header__icon"></a>
                    <a href="#" class="header__logo">Logo</a>

                    <nav>

                        <ul class="menu-principal">
                            <li><a href="#">aaa</a>

                                <ul class="sous-menu">
                                    <li><a href="#">fff</a></li>
                                    <li><a href="#">qqq</a></li>
                                </ul>

                            </li>
                            <li><a href="#">zzz</a></li>
                            <li><a href="#">eee</a></li>
                            <li><a href="#">rrr</a></li>
                            <li><a href="#">ttt</a></li>
                        </ul>

                    </nav>

                </header>    

nav{

    float: right;

    ul{

//        display: block;
//        position: relative;

        li{

            display: inline;

            &:hover{

                .sous-menu{

                    display: block;
                    position: absolute;

                }

            }

        }

    }

    .sous-menu{

        display: block;

    }

}

et enfin le css responsive

nav{

    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: red;//@gris;//rgba(64, 63, 65, 1);
    width: 200px;

    ul{

        li{

            display: block;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid black;

            &:hover{

                .sous-menu{

                    display: block;
                    position: relative;

                }

            }

        }

    }

    .sous-menu{

        display: block;

    }

}

Merci d'avance pour votre aide !

Amoureusement, Moi