Question

我在这里做错了什么我似乎无法定位嵌套列表元素。我尝试在无序列表的第二级使用一个名为“二级”的类，但它似乎不起作用。以下是我希望影响嵌套li元素的代码：.second-level li { background-color: #cf1a2b; display: block; padding: 0; margin: 0; text-align: center; padding: 10px 0; }以及这是我的代码： 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代码

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

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

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

选择嵌套的Li元素

1 个答案: