How To Stop Nested List From Inheriting Style From Parent List?

I want to add a nested list but I am having a problem with it inheriting from the parent list. I've followed this question and this question but they haven't helped. How could I ge

Solution 1:

don't use background-color in li use it in anchor

.innerLeft ul li a{
    background: red;
    display:block;
}

this will solve your issue

updated jsFiddle file

Solution 2:

The following rule tells the browser to render any list element inside innerLeft with a red background:

.innerLeft ul li {
    background: red;
    padding:0px;
    margin:0px 0 10px 0;
    height:18px;
}

Use specificity to target the first ul:

ul li {
  background-color: #fff;
}
.innerLeft > ul li {
    background: red;
    ...
}

By using the > selector, you are telling the browser to select the child of .innerLeft, or direct descendant.