[Resolved] Sub-Menu child items open vertically below parent in desktop menu

[drew]

Is there a way to have child and grand-child level pages drop-down below the respective parent instead of dropping down to the left or right? In short, I’m trying to get the functionality to simulate what happens now in the mobile menu, but on desktop.

[Tom]

Hi there,

Try this:

.dropdown-hover .main-navigation:not(.toggled) ul ul li:hover>ul, 
.dropdown-hover .main-navigation:not(.toggled) ul ul li.sfHover>ul {
    left: 0;
    top: 100%;
    position: relative;
}

Let me know 🙂

[drew]

Many thanks Tom! This definately works out. I can see where it is tricky in that the hover action from one child level item to the next can be visually jolting when the expand trigger is set to hover. It’s clear why this works much better in mobile where the default trigger is tap to expand. But this gives me what I need to experiment and see if there’s a way to make hover work or if it would be better flip over to click.

[Tom]

No problem! Yea, exactly – that’s why we have them coming out to the side when it’s set to hover. Haven’t found a better solution.

[Author]

Posts