CSS select second level elements

Question

How to remove background on a second level li elements ?

    
Test
           


        

Answer 1

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:

1. set the background to the elements
2. 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/

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

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.