Magento 2 – Change Positions of the Navigation Submenu

cssmagento-2.1magento2topmenu

I made some modifications on the top navigation menu in Blank theme.

I need to change the position of the submenu. I try to find some JavaScript but no luck, then I see this in the Magento_Theme/templates/html/topmenu.phtml

<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"right top","at":"right bottom"}}}'>

How I can change the position, I need to move submenu a little bit at top maybe 10px.

<nav class="navigation" data-action="navigation">
<ul id="ui-id-5" class="ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" tabindex="0" aria-activedescendant="ui-id-15">
<li class="level0 nav-1 first level-top parent ui-menu-item" role="presentation">
<a id="ui-id-6" class="level-top ui-corner-all" href="http://example.com/priming.html" aria-haspopup="true" tabindex="-1" role="menuitem">
<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>
<span>Priming</span>
</a>
<ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none; top: 62px; left: -0.466675px;" role="menu" aria-expanded="false" aria-hidden="true">
<li class="level1 nav-1-1 first ui-menu-item" role="presentation">
<a id="ui-id-12" class="ui-corner-all" href="http://example.com/priming/materials.html" tabindex="-1" role="menuitem">
<span>Materials</span>
</a>
</li>
<li class="level1 nav-1-2 ui-menu-item" role="presentation">
<li class="level1 nav-1-3 ui-menu-item" role="presentation">
<li class="level1 nav-1-4 ui-menu-item" role="presentation">
<li class="level1 nav-1-5 ui-menu-item" role="presentation">
<li class="level1 nav-1-6 ui-menu-item" role="presentation">
<li class="level1 nav-1-7 ui-menu-item" role="presentation">
<li class="level1 nav-1-8 ui-menu-item" role="presentation">
<li class="level1 nav-1-9 ui-menu-item" role="presentation">
<li class="level1 nav-1-10 last ui-menu-item" role="presentation">
</ul>
</li>
<li class="level0 nav-2 level-top parent ui-menu-item" role="presentation">
<li class="level0 nav-3 level-top parent ui-menu-item" role="presentation">
<li class="level0 nav-4 level-top parent ui-menu-item" role="presentation">
<li class="level0 nav-5 level-top parent ui-menu-item" role="presentation">
<li class="level0 nav-6 last level-top parent ui-menu-item" role="presentation">
</ul>
</nav>

enter image description here

Best Answer

You need to add below css in your custom CSS / LESS file . I think I have already stated you before how to add custom CSS / LESS.

 .navigation .level0 .submenu{
    top:30px !important;  <!-- adjust this value as you required, this is just for sample-->
}

enter image description here