选择嵌套Li元素

Question

我在做什么错在这里我似乎无法定位嵌套列表元素。我尝试在无序列表的第二级使用称为“第二级”的类，但它似乎不起作用。下面是我要实现我的嵌套li元素的码位：.second-level li { background-color: #cf1a2b; display: block; padding: 0; margin: 0; text-align: center; padding: 10px 0; }这是我的代码：HTML代码

 <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代码

/****************** 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

问题是因为在影响嵌套li元素的css代码之前，我有一个额外的*/，这阻止了更改。

/*-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; }