modificator example

by arohy

HTML

<ul class="menu menu--main menu--horizontal">
    <li class="menu-node menu-node--main_lvl_1">
        <a class="menu-link">Пункт 1</a>
        <ul class="menu menu--dropdown menu--vertical">
            <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>
        </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>

CSS

.menu{}
.menu-node{}
.menu-link{}
.menu--horizontal{}
.menu--vertical{}
.menu--dropdown{}
.menu--main{}
.menu-node--main_lvl_1{}
.menu-node--main_lvl_2{}