CodePen

HTML

            
              <p>When on Leaflet Page this code gets generated, so you can tie into class of ".current-menu-item" for active menu items.</p>
<div class="menu-mainmenu-container"><ul id="menu-mainmenu" class="menu"><li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-48"><a href="http://localhost/wordpress/">Home</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page  page_item page-item-34 menu-item-49"><a href="http://localhost/wordpress/about/">About</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://localhost/wordpress/projects/">Projects</a>
<ul class="sub-menu">
	<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://localhost/wordpress/projects/feel-good-candy/">Feel Good Candy</a></li>
	<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54 current-menu-item current_page_item"><a href="http://localhost/wordpress/projects/leaflet/">Leaflet</a></li>
</ul>
</li>
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://localhost/wordpress/forums/">Forums</a></li>
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://localhost/wordpress/shop/">Shop</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://localhost/wordpress/contact/">Contact</a></li>
</ul></div>
            
          
!

CSS

            
              /*  much easier to style menu like this, since your menu is global you don't need to target each individual item   */
.menu-mainmenu-container {}
.menu-mainmenu-container ul {}
.menu-mainmenu-container ul li {}
.menu-mainmenu-container ul li a {}
.menu-mainmenu-container ul li a:visited {}
.menu-mainmenu-container ul li a:hover {text-transform:uppercase;}
.menu-mainmenu-container ul li a:active {}
.menu-mainmenu-container ul li ul {}
.menu-mainmenu-container ul li ul li {}
/* Much cleaner than this >>>>
ul#main-navigation li a:hover, 
body.home ul#main-navigation li.header-home a, 
body.about ul#main-navigation li.header-about a, 
body.projects ul#main-navigation li.header-projects a, 
body.bbPress ul#main-navigation li.header-forums a, 
body.shop ul#main-navigation li.header-shop a, 
body.contact ul#main-navigation li.header-contact a, 
bod.default ul#main-navigation li.header-home a, 
body.feelgoodcandy ul#main-navigation li.header-projects a, 
body.leaflet ul#main-navigation li.header-projects a, 
body.feelgoodcandy ul#main-navigation li.header-feelgoodcandy a, 
body.leaflet ul#main-navigation li.header-leaflet a {
	color: #FFFEF2;}

then just apply class for active item */
.current-menu-item {
  background:red;
}
/* wordpress will generate this class on appropriate menu item"
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................