Customizing Sub-menu display

Ask the community
1

Hi,

Is there any ways to make the sub-menu look like this?

1216×192 78.7 KB

So far, I’ve only seen submenu as vertical dropdown or horizontal but the sub-menu container is restricted in size, cannot be extended to the edge like I wish (for the horizontal one).

1018×284 18.3 KB

1444×230 31.2 KB

Thanks!!

2

Use a single menu item in a container with hover-state employed. This way you can design anything you want pretty-much. The “drop-down” is part of the contain and appears on hover. I did a 4-cholumn, which sadly can’t be connected a dataset because it is a header. I am think of avoid the header element altogether on the desktop layout. Good luck, this was fun to put together.

https://iamteejay.editorx.io/vascular-institute

3

Hey @phanhlosophy-design !

Here’s a quick video to show how to achieve what you’re looking for :slight_smile:

4

Thank you!

5

Thank you! It worked!!!
The only thing is that seems to be a problem is the Hover effect on Submenu items. I cannot change the “default” highlight/background text colour of the submenu items. The Regular and Clicked states are fine. Just the Hover state

694×200 11.6 KB

You can see here that I set the opacity to 0% for the Highlight. After I close and open it again, it appears again as 100%.

996×830 49.5 KB

6

WOW. I didn’t know this existed. Thanks for sharing.

7

[UPDATE] For this issue, thanks to an Editor X Customer Care Expert, I was able to resolve by clicking on the blue button besides the item state dropdown (“Remove design overrides”):