li show ul on Hover

Glenn Blog Leave a Comment

You don’t need Javascript / jQuery to show a hidden (display: none) child/nested ul on hover of the parent li, as this can be achieved with CSS alone:-

li:hover > ul {
  display: block;

This is a basic implementation and to ensure you target the right element you should use a CSS ID or Class like so:- > ul.sub {
  display: block;

This method is particularly useful for creating Menus with nested Submenus (at multiple levels) that are to be displayed on hover. The limitation of this approach is that there is no specific CSS declaration for an ‘onClick’ event (:focus is the closest / :target for links) and for this, you would need javascript.

About the Author
li show ul on hover li show ul on Hover 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g


A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.