Selecting nested Li elements

Question

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: .second-level li { background-color: #cf1a2b; display: block; padding: 0; margin: 0; text-align: center; padding: 10px 0; } .second-level li { background-color: #cf1a2b; display: block; padding: 0; margin: 0; text-align: center; padding: 10px 0; } .second-level li { background-color: #cf1a2b; display: block; padding: 0; margin: 0; text-align: center; padding: 10px 0; } and Here's my code: HTML CODE

      <div class="col-sm-8">
        <ul class="top-level">
          <li><a href="#">Home</a></li>
          <li><a href="#">Products</a>
            <ul class="second-level">
              <li id='brand'>Ze<span>bra</span></li>
              <li><img src="img/tie.png" alt="tie"></li>
              <li><a href="#">Asics shoes</a></li>
              <li><a href="#">Nike air free</a></li>
              <li><a href="#">Sports Jerseys</a></li>
              <li><a href="#">Nike Air Max</a></li>
              <li><a href="#">Nike Shox shoes</a></li>
              <li><a href="#">Nike AF1 shoes</a></li>
              <li><a href="#">Asics shoes</a></li>
              <li><a href="#">Nike air free</a></li>
            </ul>
          </li>
          <li><a href="#">Shopping</a></li>
          <li><a href="#">Contact</a></li>
          <li id="cart"><a href="#"><img src="img/cart.png" alt="Cart"><p>$35.00</p></a></li>
        </ul>
    </div><!-- end of col-sm-8 -->
  </div><!-- end of row -->
  </body>
</html>

CSS CODE

 /****************** HEADER **********************/


    .top-level { list-style-type: none; padding: 0; margin: 0; position: absolute; }

    .top-level > 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 > 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 > 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; }

Answer 1

The issue was that I had an extra */ before the css code that affected the nested li elements, which prevented the change.

/*-webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s;  -transition: opacity 0.2s;}*/ */

.second-level li {  background-color: #cf1a2b; display: block; margin: 0; text-align: center;  padding: 20px 0; }