Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A simple set of rulesets to add dropdown styling for WP menu structures.
* A basic dropdown set of styles for WP wp_nav_menu() / wp_pages_list()
* This dropin group of rulesets uses a top level selector nav#site-main which needs to be changed to suit or added to markup.
* There is a simple series of CSS Transitions to provide a little smoothness to the opening / closing of the menu and opacity * transitioned on the li elements.
* There are background colours added and obviously these are subjective and won't suit all themes so need changing
* There is a comlimentary JS snippet that just adds classes to hovered li elements and their parents, this is named in time * honoured manner as 'sfhover' it's real purpose used to be to provide support for IE but are also useful to provide xpath * navigation back up the li nodes and used here to add li backgrounds on all hovered elements parents. In addition the script * Adds a class 'has-child' to li elements having nested ul li children.
/* Configure main menu dropdowns */
nav#site-main ul li {
position: relative;
nav#site-main ul li li {
margin-right: 0;
nav#site-main ul ul {
-moz-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999;
border: 1px solid #969696;
position: absolute;
top: 0;
margin-top: 1.5em;
opacity: 0;
transition: visibility 1s ease-in-out 0s, opacity 0.6s ease-in-out 0.5s;
visibility: hidden;
nav#site-main ul ul li {
background: #D1D4DC;
display: block;
padding: .2em .8em .2em .2em;
opacity: .8;
white-space: nowrap;
width: auto;
transition: opacity 1s ease-in-out 0s;
nav#site-main ul ul ul {
left: 98%;
top: 4px;
margin: 0;
padding-top: 0;
nav#site-main ul li:focus > ul,
nav#site-main ul li:hover > ul {
opacity: 1;
visibility: visible;
nav#site-main ul ul li:focus,
nav#site-main ul ul li:hover,
nav#site-main ul ul .sfhover,
nav#site-main ul ul .sfhover li {
background: #AEB6C8;
opacity: 1;
* This section is the simple jQuery snippets that add classes, they would need to be added to a file and enqueued or added to * the WP footer via wp_foot().
* These snippets are not critical to the functioning of the dropdowns but mustn't be added to a stylesheet file.
jQuery(document).ready( function($) {
$("#site-main ul li").mouseover( function() {
$("#site-main ul li").mouseout( function() {
$('#site-main ul li ul li').parents('li').addClass('has-child');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment