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

效果图