How to set background on the selected item in the quick launch left menu?

Question

I am using sharepoint 2013 online (o365). I am using sharepoint designer and has added my custom css. I have add some styling and they are working. Now I would like to style the left menu (quick launch). I would like to set the background color of the selected item. In the source I found this class and set it in my custom css. But it dont work. What do I need to do?

 .static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode 
 {
         background-color:red !important;
 }

Answer 1

Opening SharePoint 2013 Online (O365) site page using developer tool or in SP Designer check the master page, we can observe that the html of Left Navigation is rendered under Div with id sideNavBox.

Developer Tool Screen Shot

SPD screen shot

So in order to change background colour of Left Nav selected link, I would recommend below css class

div#sideNavBox li.selected > a {
  background-color: red;
}

If your custom.css is getting rendered before corev15.css then I guess you don't need to add !important hack, Otherwise use below.

div#sideNavBox li.selected > a {
  background-color: red!important;
}

Answer 2

This css worked for me, I used this in CEWP on SharePoint 2013 on premise.

Try this css code:

<style>
.ms-core-listMenu-verticalBox UL.root > LI > .menu-item {
     /*Style each menu item*/
     background-color: red;
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {
     /*Style on hove sub items*/
      background-color: blue;
}
.ms-core-listMenu-verticalBox > ul.root > li.selected > a { 
     /*Style selected top level item*/
      background-color: yellow;
}
.ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
     /*Style top level mouse hover*/
      background-color: green;
</style>

Further you can use css according to your need.

Answer 3

.sideNavBox .menu-item.selected{
 background-color:red !important;}

or

#sideNavBox .menu-item.selected{
 background-color:red !important;}