html+css写二级菜单

导语

二级菜单主要通过无序列表ul的嵌套实现，注意设置样式的时候，因为被嵌套的元素是嵌套元素的子元素，如果不加类名，样式就会继承，整个就乱掉了。建议给第一层的ul和li一个类名，这样后面的子元素就不会继承外层的父元素的样式了。
HTML

<ul class="out">
        <li class="li2"><a href="">首页</a></li>
        <li class="li1"><a href="">鞋子</a>
          <ul class="in">
              <li><a href="">篮球鞋</a></li>
              <li><a href="">运动鞋</a></li>
              <li><a href="">皮鞋</a></li>
              <li><a href="">帆布鞋</a></li>
              <li><a href="">高更鞋</a></li>
          </ul>
        </li>
        <li class="li1"><a href="">衣服</a>
            <ul class="in">
                    <li><a href="">篮球鞋</a></li>
                    <li><a href="">运动鞋</a></li>
                    <li><a href="">皮鞋</a></li>
                    <li><a href="">帆布鞋</a></li>
                    <li><a href="">高更鞋</a></li>
                </ul>
        </li>
        <li class="li2"><a href="">包包</a></li>
        <li class="li2"><a href="">外套</a></li>
        <li class="li1"><a href="">煤球/探求</a>
            <ul class="in">
                    <li><a href="">篮球鞋</a></li>
                    <li><a href="">运动鞋</a></li>
                    <li><a href="">皮鞋</a></li>
                    <li><a href="">帆布鞋</a></li>
                    <li><a href="">高更鞋</a></li>
                </ul>
        </li>
        <li class="li2"><a href="">出去玩</a></li>
    </ul>

CSS

 *{
            margin: 0;
            padding: 0;
            font-family: "幼圆";
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
     .out{
         padding-left:50px;
         line-height: 65px;
         height:65px;
         background-color:black;
     }
     .out .li1,.out .li2{
         width:140px;
         text-align: center;
         float:left;
     }
     .out .li1 a,.out .li2 a{
         color:antiquewhite;
     }
     .out .in{
         width:140px;
         background-color:black;
         display:none;
     }
     .out .li1:hover a,.out .li2:hover a{
         color:lightcoral;
     }
     .out .li1:hover ,.out .li2:hover{
         background-color: gray;
     }
     .out .in li{
         text-align: center;
         height:50px;
         line-height:50px;
     }
     .out .li1:hover .in{
           display: block;
     }
     .out .li1:hover .in li:hover a{
         color:lightblue;
     }
     .out .li1:hover .in li:hover{
         background-color: grey;
     }

效果图