CSS select second level elements

How to remove background on a second level li elements ?

<ul class="navi">
  <li><a href="">Test</a></li>
  <li class="current">
      <a href="">Test</a>
      <ul class="navi2">
          <li class="current"><a href="">Remove bg</a>
          </li>
          <li><a href="">Remove bg</a>
          </li>
      </ul>
  </li>
  <li><a href="">Test</a>
  </li>
</ul>

I have tried to put background-color: blue instead of background: none, and it worked. I really don’t know why.

Here is my CSS:

ul.navi {
  list-style: none;
  width: 247px;
}

ul.navi > li {
  line-height: 36px;
  background-color: red;
  border-radius: 8px;
  margin-bottom: 10px;
}

ul.navi > li > ul > li {
  background: none;
}

ul.navi li a {
  display: block;
  color: #f4dfe8;
  font-weight: bolder;
  padding: 0 0 0 12px;
  text-decoration: none;
}

http://jsfiddle.net/zhrgyLrf/


solution

Why not just set the background on the direct a child elements?

Updated Example

ul.navi > li > a {   background-color: red;
}

The reason background: none wasn’t working is because you are setting the background on the entire parent, li element. Thus, even though the children don’t have a background, the parent’s background is still shown because it encompasses the children. As an alternative, you would have to set the children’s background to #fff. In doing so, you would unfortunately lose your transparency, though.