XF 2.2 Top Navigation Drop down hover effect

[oO5 Dynasty]

I was looking to see how can I remove the clickable dropdown list that is next to applicable links in the top navbar.
Then have it as when the user hovers their mouse over the Main nav icon, the child links just automatically show.
I am trying to clean up the Navigation to have it just show the main icons. Plus it will give me more room on the navbar.

 

[nocte]

Here you'll find the CSS for "show menu on over":

XF 2.1 - How to make navigation dropdown on hover

I have one site which has a combination of Wordpress and XenForo. I am trying to style so the main navigation is the same for both, but one issue is that although the WP submenus dropdown on hover, the Xenforo ones don't. (I believe this is new since v2) Some members are bit confused by this...

xenforo.com

I have added removal of drop-down arrows:

@media (min-width: (@xf-responsiveWide + 1))
{
    .p-nav-list .p-navEl-link { padding-right: 15px !important; }
    
    .has-no-touchevents .p-nav, .has-no-touchevents .p-sectionLinks
    {
        .p-navEl[data-has-children]
            {
                position: relative;
                &:hover:not(.is-selected) .menu
                {
                    display: block;
                    opacity: 1;
                    top: @header-navHeight;
                    z-index: @zIndex-4;
                    
                }
                .p-navEl-splitTrigger { pointer-events: none; display: none; }
        }
        .hScroller { overflow: visible; }
        .hScroller-scroll
        {
            margin-bottom: 0 !important;
            overflow: visible;
            padding-bottom: 0 !important;
        }
    }
    .has-no-touchevents .p-sectionLinks .p-navEl[data-has-children]:hover:not(.is-selected) .menu { top: @header-subNavHeight; }
}

 

[oO5 Dynasty]

Here you'll find the CSS for "show menu on over":

XF 2.1 - How to make navigation dropdown on hover

I have one site which has a combination of Wordpress and XenForo. I am trying to style so the main navigation is the same for both, but one issue is that although the WP submenus dropdown on hover, the Xenforo ones don't. (I believe this is new since v2) Some members are bit confused by this...

xenforo.com

I have added removal of drop-down arrows:

@media (min-width: (@xf-responsiveWide + 1))
{
    .p-nav-list .p-navEl-link { padding-right: 15px !important; }
   
    .has-no-touchevents .p-nav, .has-no-touchevents .p-sectionLinks
    {
        .p-navEl[data-has-children]
            {
                position: relative;
                &:hover:not(.is-selected) .menu
                {
                    display: block;
                    opacity: 1;
                    top: @header-navHeight;
                    z-index: @zIndex-4;
                   
                }
                .p-navEl-splitTrigger { pointer-events: none; display: none; }
        }
        .hScroller { overflow: visible; }
        .hScroller-scroll
        {
            margin-bottom: 0 !important;
            overflow: visible;
            padding-bottom: 0 !important;
        }
    }
    .has-no-touchevents .p-sectionLinks .p-navEl[data-has-children]:hover:not(.is-selected) .menu { top: @header-subNavHeight; }
}

Oh my God, you are my hero! Thank you sooooooooooo much! Now my navigation is super clean! Thank you!