title: CSS select second level elements
body: <p>How to remove background on a second level <code>li</code> elements ?</p>
  
  <pre><code>&lt;ul class="navi"&gt;
      &lt;li&gt;&lt;a href=""&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;li class="current"&gt;
          &lt;a href=""&gt;Test&lt;/a&gt;
          &lt;ul class="navi2"&gt;
              &lt;li class="current"&gt;&lt;a href=""&gt;Remove bg&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Remove bg&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Test&lt;/a&gt;
      &lt;/li&gt;   
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have tried to put <code>background-color: blue</code> instead of <code>background: none</code>, and it worked. I really don't know why.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>ul.navi {
      list-style: none;
      width: 247px;
  }
  
  ul.navi &gt; li  {
      line-height: 36px;
      background-color: red;
      border-radius: 8px;
      margin-bottom: 10px;
  }
  
  ul.navi &gt; li &gt; ul &gt; li {
      background: none;   
  }
  
  ul.navi li a {
      display: block;
      color: #f4dfe8;
      font-weight: bolder;
      padding: 0 0 0 12px;
      text-decoration: none;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/zhrgyLrf/" rel="noreferrer">http://jsfiddle.net/zhrgyLrf/</a></p>