title: Selecting nested Li elements
body: <p>What am I doing wrong here I can't seem to target the nested list elements. I tried using a class called 'second-level' on the 2nd level of the unordered list, but it won't seem to work.  Here's the bit of code that I want to effect my nested li elements: <code>.second-level li {  background-color: #cf1a2b; display: block; padding: 0; margin: 0; text-align: center; padding: 10px 0; }</code> and    Here's my code: <strong>HTML CODE</strong></p>
  
  <pre><code>      &lt;div class="col-sm-8"&gt;
          &lt;ul class="top-level"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
              &lt;ul class="second-level"&gt;
                &lt;li id='brand'&gt;Ze&lt;span&gt;bra&lt;/span&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="img/tie.png" alt="tie"&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Asics shoes&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Nike air free&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Sports Jerseys&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Nike Air Max&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Nike Shox shoes&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Nike AF1 shoes&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Asics shoes&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Nike air free&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Shopping&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;li id="cart"&gt;&lt;a href="#"&gt;&lt;img src="img/cart.png" alt="Cart"&gt;&lt;p&gt;$35.00&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- end of col-sm-8 --&gt;
    &lt;/div&gt;&lt;!-- end of row --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS CODE</strong></p>
  
  <pre><code> /****************** HEADER **********************/
  
  
      .top-level { list-style-type: none; padding: 0; margin: 0; position: absolute; }
  
      .top-level &gt; li { height: auto; padding: 15px 0; display: inline-block; position: relative; vertical-align: middle; font-size: 18px; font-family: 'Helevitca Neue'; text-align: center; cursor: pointer; width: 149px; background: #fff; -webkit-transition: all 0.2s;  -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
  
      .top-level &gt; li:hover  { background-color: #cf1a2b; }
  
      .top-level a { color: #626262;  }
  
      .header li:hover a { text-decoration: none; color: #fff; }
  
      #cart p { display: inline; }
  
      .top-level li &gt; ul  { background: #cf1a2b; position: absolute; top: 100%; left: 0; width: 100%; padding: 0; list-style-type: none;  }
  
  
  
      .second-level li {  background-color: #cf1a2b; display: block; margin: 0; text-align: center; padding: 10px 0; }
  
      li#brand { font-family: 'Helevitca Neue'; font-size: 38px; color: #fff; text-transform: uppercase; border: 1px solid #fff; border-left: none; }
  
      #brand span { color: #fec8cd; }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/snWkm.png" rel="nofollow"><img src="https://i.stack.imgur.com/snWkm.png" alt="No effect from css code on nested li elements"></a></p>