DEV Community

Discussion on: Create Drop-Down Menus with Plain CSS

Collapse
alvaromontoro profile image
Alvaro Montoro • Edited on

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

#nav-element:focus-within  #div-products, /* <-- new line */
#nav-element:hover  #div-products {
  display: block;
}
Enter fullscreen mode Exit fullscreen mode

That way the menu will be keyboard accessible too. Maybe not the best user experience, but at least it would be reachable.

Collapse
salex profile image
Steve Alex

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

Collapse
themohammadsa profile image
Mohammad S Author

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