If you add a sidebar with a menu widget, you may notice that the menu is displayed in a very simple manner. Below is code that you can add to your custom CSS to add some style to your sidebar menu. This code will work with websites using the Hale 2015 and Sherman themes.

#page-sidebar .widget.widget_nav_menu {
padding-left:0;
padding-right:0
}

#page-sidebar .widget ul {
margin:0
}

#page-sidebar .widget ul li {
padding:1em;
margin:0
}

#page-sidebar .widget ul li.current-menu-item,#page-sidebar .widget ul li.current-menu-item:hover,#page-sidebar .widget ul li.current-menu-item:active {
background:#0f4786
}

#page-sidebar .widget ul li:hover,#page-sidebar .widget ul li:active {
background:#dbe3ed
}

#page-sidebar .widget ul li.current-menu-item a,#page-sidebar .widget ul li.current-menu-item:hover a,#page-sidebar .widget ul li.current-menu-item:active a {
color:#fff
}

To see how this CSS code looks on an actual sidebar menu, visit the Development page.