Edit: a problem with the menu is that it is not keyboard-friendly. It only works on hover, so keyboard users cannot open the menu. A possible solution for it would be to open the menu when the focus is within the navigation (adding one line of code):
#nav-element:focus-within#div-products,/* <-- new line */#nav-element:hover#div-products{display:block;}
That way the menu will be keyboard accessible too. Maybe not the best user experience, but at least it would be reachable.
Would work fine in a side bar, but in a top bar it pushes everything down. Kind of distracting if used in wrong place. I tried z-index, but never had much luck with z-index.
Still it works fine
It looks nice. Do you have a link to a demo?
Edit: a problem with the menu is that it is not keyboard-friendly. It only works on hover, so keyboard users cannot open the menu. A possible solution for it would be to open the menu when the focus is within the navigation (adding one line of code):
That way the menu will be keyboard accessible too. Maybe not the best user experience, but at least it would be reachable.
Would work fine in a side bar, but in a top bar it pushes everything down. Kind of distracting if used in wrong place. I tried z-index, but never had much luck with z-index.
Still it works fine
Here's a link to the live demo: 71cqf.csb.app/
(just added it in the blog too)
Oh, yes.. darn! I forgot about the keyboard accessibility part, Thank You for sharing it. :)