I found this two years old Dribbble shot by Ignacio Giri. Don’t ask me how, I just don’t remember how did I stumble upon it but one thing is clear: I bookmarked this dropdown menu concept, stared at it a bit and then I thought about making something similar with CSS.
The code below does not need any explanation, so I’ll just paste here the raw version so you can take a quick look at it. The HTML submenu class is here to avoid using .menu ul later on. For better and shorter CSS selectors.
Also, the cf does exactly what you’ve been thinking it would do: it clears floats.
Because we need to clear floats:
… and we don’t need any browser defaults for none of the below:
Check the following lines for the rest of the styles, the experimental width: fit-content may be familiar to you if you read my last articles.
Don’t try to resize the window, this menu demo is not responsive because that’s not the point of this article and I didn’t wanted to bloat the CSS for that. But I made a kinda responsive dropdown menu in the past, so feel free to check it.
I tried to add backface-visibility: hidden on the transformed elements to prevent the existing flicker effect but I wasn’t pretty satisfied with the results. Maybe because there are so many elements with transformations applied to?
That would be all folks, check the demo above and let me know your thoughts and feedback on how to improve this. Thanks for reading!