hover doesn't apply background to li css

Question

What's wrong with my :hover below? I dosen't seem to have effect. Tried overflow hidden but it doesn't appear any effect.

.tabs-nav li:hover {

}

demo https://jsfiddle.net/tpd83jxx/

Answer 1

You have to apply the :hover effect in a:hover because you have already applied background-color to a element. Try and add this code.

.tabs-nav a:hover {
  background-color: red;
}

Answer 2

Nothing wrong with the css ,Here you applied background for a tag.

So change the hover to a

.tabs-nav li:hover a {
    color: white;
    background: red;
} 

Answer 3

Below code works for me

.tabs-nav li :hover {
  color: white;
  background: red;
}

If I am not wrong Space is added to apply hover to the child of li. In this case for anchor tag