Styling WordPress Navigation Menus

A personal reference snippet to help me remember the various dynamic classes, and states that need styling when designing a WordPress Navigation menu.

This isn’t a tutorial. It’s just the code I ended up using to accomplish this. Menus can be a hassle to style. Hopefully by looking this over, you’ll be able to get a clearer picture of how to style your WordPress Navigation menus.

/* Navigation Style */
#mainnav	{
	height: 30px; /* set to the height you want your menu to be */
	margin: 0 0 10px; /* just to give some spacing */
}
#mainnav ul	{
	margin: 0; padding: 0; /* only needed if you have not done a CSS reset */
}
#mainnav li	{
	display: block;
	float: left;
	line-height: 30px; /* this should be the same as your #main-nav height */
	height: 30px; /* this should be the same as your #main-nav height */
	margin: 0; padding: 0; /* only needed if you don't have a reset */
	position: relative; /* this is needed in order to position sub menus */
}
#mainnav li a	{
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 15px;
}
#mainnav .current-menu-item a, #mainnav .current_page_item a, #mainnav a:hover {
	color: #000;
	background: #ccc;
}
#mainnav ul ul { /* this targets all sub menus */
	display: none; /* hide all sub menus from view */
	position: absolute;
	top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
}
#mainnav ul ul li { /* this targets all submenu items */
	float: none; /* overwriting our float up above */
	width: 150px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
#mainnav ul ul li a { /* target all sub menu item links */
	padding: 5px 10px; /* give our sub menu links a nice button feel */
}
#mainnav ul li:hover > ul {
	display: block; /* show sub menus when hovering over a parent */
}
#mainnav ul ul li ul {
	/* target all second, third, and deeper level sub menus */
	left: 150px; /* this needs to match the sub menu width set above -- width + padding + borders */
	top: 0; /* this ensures the sub menu starts in line with its parent item */
}

Hire WordPress Experts at Codeable.

The only WordPress exclusive freelancer platform that connects thousands of customers with the top WordPress freelance experts to work on projects of any size. 

Free estimate • No obligation to hire • 100% risk-free