Шаблон menu.tpl добавляем шаблон для подпунктов и убираем data атрибут для открытие по клику.

{block menu_params}
    
    {$params = [
        "parentRowTpl" => '@CODE <li[[+wf.id]] class="dropdown">
            <a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]] class="dropdown-toggle">[[+wf.linktext]] <span class="caret"></span></a>
            [[+wf.wrapper]]
        </li>',
        "rowTpl" =>'@CODE <li class="dropdown">
<a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
</li>',
        "outerClass" => 'nav navbar-nav',
        "innerClass" => 'dropdown-menu'
    ]}

{/block}

assets/components/modxsite/templates/shopmodx/bundle/styles/styles.css Чтобы меню раскрывалось при наведении мыши в конец дописываем

.dropdown:hover > .dropdown-menu {
    display: block;
}

Дальше сами думайте, по сути это уже допиливание bootstrap ройте в этом направлении, modx тут не причем.