CSS select second level elements - css

Question

How to remove background on a second level li elements ?
<ul class="navi">
<li>Test</li>
<li class="current">
Test
<ul class="navi2">
<li class="current">Remove bg
</li>
<li>Remove bg
</li>
</ul>
</li>
<li>Test
</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/

Answer 1

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.

Answer 2

Your li is inside the red li. Try to just set another color, for example
ul.navi > li > ul > li {
background: #fff;
}
Color: transparent will also not work here... Because when You've got color: transparent, it is transparent, and the "below" red is visible underneath it.
Good luck, hope it helps.
Updated: http://jsfiddle.net/zhrgyLrf/1/

Answer 3

IT happens because you ars setting the background to the entire <li> , and the second level is inside to the first , your second level has a transparent background and that's the reason because you see red (is the inmediately background set). You have 2 options:
set the background to the elements
set a background matching to the original background
I recommend set the background to the elements like this:
ul.navi > li {
line-height: 36px;
border-radius: 8px;
margin-bottom: 10px;
}
ul.navi > li > a {
background-color: red;
}
fiddle : http://jsfiddle.net/zhrgyLrf/2/