CSS selects second level elements

Question

How to remove the background at the second level of lielements?

<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 tried to put background-color: blueinstead 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 for direct children a?

Updated example

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

background: none , li. , , , , . #fff. , , .

Answer 2

. ,

ul.navi > li > ul > li {
    background: #fff;   
}

: ... , : , , "" .

, , .

: http://jsfiddle.net/zhrgyLrf/1/

Answer 3

, <li>, , , , ( ), 2 :

• set background to elements
• set the background match to the original background

I recommend setting the background to elements such as:

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

script: http://jsfiddle.net/zhrgyLrf/2/