Change out of box tree view style using custom css

1. Change out of Box tree view style using custom CSS
Introduction: We can use custom css to change the SharePoint out of box Quick Launch menu.
Before proceeding, we have to create a css file and add the below code.
<Style>
.ms-core-listMenu-verticalBox UL.root > LI > .menu-item{
font-weight:bold;
background-color:#5482AB;
color:#ffffff;
border-bottom-color:#ffffff;
border-bottom-style:solid;
border-bottom-width:1px;
min-height:25px;
padding-top:5px;
padding-left:10px;
font-size:12px;
font-family:Arial, Helvetica, Sans-Serif !important;
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {
color:#ffffff !important;
background-color:#D95E00 !important;
text-decoration:none;
}
.ms-core-listMenu-verticalBox > ul.root > li.selected> a {
background-image:none;
background-color:#D95E00;
color:#ffffff !important;
}

2. .ms-core-listMenu-verticalBox > ul.root > li > a:hover {
background-image:none;
background-color:#D95E00;
color:#ffffff !important;
text-decoration:underline;
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a {
font-size:12px;
padding-left:10px;
font-family:Arial, Helvetica, Sans-Serif !important;
}
.ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected{
background:none;
color:#D95E00 !important;
background-color:#ffffff!important;
text-decoration:none;
border:1px #fff solid;
font-weight:bold;
}
.ms-core-listMenu-verticalBox a.selected
{
border:1px #fff solid!important;
}
.ms-core-listMenu-verticalBox UL.root UL
{
margin:0px 0px 10px 0px !important;
}
</Style>

3. We can create a custom css style and reference it through master page. For styling quick launch you
can use above styles.
Example:
<link rel="stylesheet" type="text/css" href="/sites/Test/Style%20Library/customCss.css">
For testing purpose, we can also apply this css inside SharePoint Script Editor Web part and check
the result.
Before applying CSS: After Applying CSS