CSS Only Drop Down Menus for Wordpress

So you want to create a menu with a drop-down for WordPress. The challenge in this is that the formatting needs to happen on the submenu when the parent item is selected. This is where the cascading part of stylesheets comes in. Assuming you know how to work with classes and set up menus (at least whatever part WordPress doesn't do automatically for you.), there are two basic steps left.

1. You need to hide the <li> items in the dropdowns. Make sure you use the hierarchy and don't assign them their own class. If you try working with a class rather than the hierarchy, you won't be able to make them reappear with CSS only.

.nav ul.menu-class ul li {
display:none;
}

2.Once you have successfully hidden the navs, you'll need to make them show up again when the hover property is activated.


.nav ul.menu-class:hover ul li {
display:block;
}

The rest of your formatting will vary, depending on whether you want it to show up horizontally or vertically, but the main thing is to target the parent "ul" and change the "li" of the sub menu using the hierarchy.