Customizing Sub-menu display


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

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).


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.

Hey @phanhlosophy-design !

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

Thank you!

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

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%.

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

1 Like

[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”):

1 Like