Блоки. Menu. Multilevel

by arohy

HTML

<ul class="menu menu--main menu--main_lvl_1 menu--horizontal">
    <li class="menu-node menu-node--main_lvl_1">
        <a class="menu-link">Пункт 1</a>
        
        <ul class="menu menu--main_lvl_2 menu--dropdown">
            <li class="menu-node menu-node--main_lvl_2">
                <a class="menu-link">Пункт 1.1</a>
            </li>
            <li class="menu-node menu-node--main_lvl_2">
                <a class="menu-link">Пункт 1.2</a>
            </li>
            <li class="menu-node menu-node--main_lvl_2">
                <a class="menu-link">Пункт 1.3</a>
            </li>
        </ul>
    </li>
    <li class="menu-node menu-node--main_lvl_1">
        <a class="menu-link">Пункт 2</a>
    </li>
    <li class="menu-node menu-node--main_lvl_1">
        <a class="menu-link">Пункт 3</a>
    </li>
</ul>

SCSS

.menu{
    &-node{
        // стили для узлорв меню        
        &--main_lvl_1{
            // стили для первго уровня меню
            > .menu-link{
                // непосредственный потомок первого уровня
            }
        }
        
        &--main-lvl_2{
            // стили для второго уровня меню
            > .menu-link{
                // непосредственный потомок второго уровня
            }
        }
    }
}