Why does my background color menu items stay black, and not change color with my css-CodePudding

I am trying to change my background color on the menu items, but they just stay black all the time. My lines underneath move and are red, its just the background colors. I am using a twentythirteen theme in wordpress to experiment. Here is the css:

nav-menu li a:hover {

background: pink;`

` color: orange;

display: flex;

flex-direction: column;

align-items: start;

list-style-type: none;

position: relative;

display: block;

text-decoration: none;

font-family: "Lato";

font-size: 2rem;

color: pink;

text-transform: uppercase;

padding: 4px 0;

transition: 0.5s;

}

.nav-menu li a::after {

position: absolute;

content: "";




width: 100%;

height: 3px;

top: 100%;

left: 0;

background: red;




 transition: transform 0.5s;

transform: scaleX(0);

transform-origin: right;

}

.nav-menu a:hover::after {

transform: scaleX(1);

transform-origin: left;

}

CodePudding user response：

You could use something like !important.

nav-menu li a:hover {
    background: pink !important;
    //….
}

CodePudding user response：

Use this

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus
 {
  background: pink !important;
   color: orange !important;
  }