How to make wordpress multi-level dropdown menus with simple css

The following css code works with the default classes of WordPress so you won't need to add custom classes for making your navigation.

Before just copying and pasting the code into your WordPress styles make sure you understand the philosophy behind this code.

Wordpress addss a ".menu-item-has-children" class to any item listed in Appearance->Menu and a ".sub-menu" class to its child elements that being said you can now simply select the parent and child element with css. Notice that we are selecting the direct child element of menu-item-has-children class so that we don't mess things under the hood.

.menu-item-has-children > .sub-menu {
  display: none;
  color:#fff;
  position: relative;
}

After you have styled your first sub-menu we need to hide it by simply doing display:none;

.menu-item-has-children > .sub-menu {
  display: none;
  color:#fff;
  position: relative;
}
We have added an ".ab-nav" class to the navigation container so we are specifically targeting the elements inside.

You can find the gist of it here

If you like this post, please Plus it, Like it or best yet, join this site- Gamier