@katamason задача слишком абстрактно описана. В общем случае — точно так же, как на голом HTML + CSS.

BEMJSON:

{
    block: 'my-menu',
    content: [
        {
            elem: 'item',
            content: 'Item 1'
        },
        {
            elem: 'item',
            content: [
                'Item 2',
                {
                    elem: 'submenu',
                    content: [
                        {
                            elem: 'item',
                            content: 'SubItem 1'
                        },
                        {
                            elem: 'item',
                            content: 'SubItem 2'
                        }
                    ]
                }
            ]
        },
        {
            elem: 'item',
            content: 'Item 3'
        }
    ]
}

BEMHTML:

block('my-menu')(
    tag()('ul'),
    elem('item').tag()('li'),
    elem('submenu').tag()('ul')
);

CSS:

.my-menu__submenu
{
    display: none;
}

.my-menu__item:hover .my-menu__submenu
{
    display: block;
}

@tadatuta возможно имелся ввиду блок menu из bem-components.

Вроде особых отличий нет:

{
        block : 'menu',
        mods : { theme : 'islands', size : 'm' },
        content : [
            {
                block : 'menu-item',
                val : 1,
                content : 'Море'
            },
            {
                block : 'menu-item',
                val : 2,
                content : [
                    'Горы',
                    {
                        block : 'menu',
                        mods : { theme : 'islands', size : 'm' },
                        content : [
                            {
                                block : 'menu-item',
                                val : 21,
                                content : 'Холмы'
                            },
                            {
                                block : 'menu-item',
                                val : 22,
                                content : 'Скалы'
                            }
                        ]
                    }
                ]
            }
        ]
    }

.menu-item .menu
{
    display: none;
}

.menu-item_hovered .menu,
.menu-item .menu_hovered
{
    display: block;
}

Всем привет. Подскажите, правильно ли я понял методологию

<ul class="menu">
    <li class="menu__item">
        <a href="" class="menu__link">Пункт</a>
    </li>
    <li class="menu__item">
        <a href="" class="menu__link">Пункт</a>
        <ul class="menu__submenu">
            <li class="menu__item menu__item--submenu">
                <a href="" class="menu__link menu__link--submenu">Пункт</a>
            </li>
        </ul>
    </li>
    <li class="menu__item">
        <a href="" class="menu__link">Пункт</a>
    </li>
</ul>

Sub-menu же не может быть блоком? Добавил модификатор на элементы sub-menu (menu__item--submenu) или здесь надо использовать микс? Может где есть сайт с реализацией такого меню в несколько уровней вложенности?

Я бы добавил к <ul class="menu__submenu"> еще и блок menu с модификатором. Типа: <ul class="menu__submenu menu menu--level--2">

Спасибо. А такой вопрос, к примеру, на странице три меню (в хедере, футере и сайдбаре). Это будет три блока menu с модификаторами типа .menu--top или блоки три разных блока типа .menu-top и т.д. Что-то подсказывает что первый вариант правильнее, но меню эти зачастую выглядят по разному, получается основная стилизация будет за счет модификаторов, ведь у всех элементов будет один класс .menuitem(.menulink)? Надеюсь ясно выразился))

Можно модификаторы, можно разные блоки (обычно, так и делается, если у них смысловая часть разная), но можно еще намиксовать на стандартное меню какую-то тему, если html устраивает (мало отличается от модификатора, но отличие есть ;-).

upd: Тут скорее от ситуации зависит, если модификатор, то каскад внутри блока на его элементы — уместен.