Quick Launch Code Changing Top Navigation

Question

I have some code to change my quick launch. but it is also changing the navigation across the top of the page. The code is to change the width of the quick launch but its put spaces in between titles on the top navigation.

<style>
    #DeltaPlaceHolderLeftNavBar 

    .menu li.hover 
 {

   background:Red;

 }

    .menu-item
 {
     background-color:white;
     width:200px;
 }
</style>

Can someone help me figure out for the code not to change the top navigation? Thanks for any help.

Answer 1

It all comes down to learning CSS Specificity

    #DeltaPlaceHolderLeftNavBar .menu li.hover {
       background:Red;
     }

Targets: all LI with a hover class in a (parent) element with class .menu in (a parent) element with id #DeltaPlaceHolderLeftNavBar

---

    .menu-item {
        background-color:white;
        width:200px;
    }

Targets: all items in the page with class menu-item

.

So you have to be more specific (that is why it is called CSS Specificity)
to only target elements with class menu-item in the #DeltaPlaceHolderLeftNavBar

with

    #DeltaPlaceHolderLeftNavBar .menu-item {
        background-color:white;
        width:200px;
    }

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Answer 2

Could you try this :

<style>
DIV #s4-leftpanel {
BACKGROUND-COLOR: yellow; MARGIN: 4px
}
DIV #s4-leftpanel-content {
BACKGROUND-COLOR: blue; MARGIN: 4px
}
.ms-quicklaunchouter {
BACKGROUND-COLOR: red; MARGIN: 4px
}
.ms-quickLaunch {
BACKGROUND-COLOR: pink; MARGIN: 4px
}
.s4-ql {
    BACKGROUND-COLOR: grey; MARGIN: 4px
}
.s4-ql .menu {
    BACKGROUND-COLOR: green; MARGIN: 4px
}
.menu-vertical UL.root {
    BACKGROUND-COLOR: black; MARGIN: 4px
}</style>

Take a look the following links: Click here And Here