自制下拉菜单

html代码：

先放一个ul(nav),让里面的li浮动，每个li里面有a和ul(subnav)

 

<ul class="nav">

        <li>

            <a href="#">联系</a>

            <ul class="subnav">

                <li> <a href="#">私信</a></li>

                <li> <a href="#">邮箱</a></li>

                <li> <a href="#">微博</a></li>

            </ul>

        </li>

        <li>

            <a href="#">关注</a>

            <ul class="subnav">

                   <li> <a href="#">喜洋洋</a></li>

                   <li> <a href="#">美羊羊</a></li>

                   <li> <a href="#">红太狼</a></li>

            </ul>

        </li>

        <li>

            <a href="#">收藏</a>

            <ul class="subnav">

                  <li> <a href="#">指纹</a></li>

                 <li> <a href="#">熊出没</a></li>

                   <li> <a href="#">小和尚</a></li>

            </ul>

        </li>

        <li>

            <a href="#">登录</a>

            <ul class="subnav">

                <li><a href="#">微信</a></li>

                <li><a href="#">微博</a></li>

                <li><a href="#">qq</a></li>

            </ul>

        </li>

    </ul>

css代码：

<style>

        *{

            margin:0;

            padding: 0;

            box-sizing: border-box;

            /* 利用css3盒子模型 */

        }

      li{

    list-style: none;

    /* 去掉小圆点 */

}

        .nav{

            width: 240px;

            height: 40px;

        }

        .nav>li{

            float: left;

            /* 选出nav的亲儿子 */

        }

        .nav li a{

            display:block;

            width: 60px;

            height: 35px;

            /* 转换成块元素才能设置宽高 */

            text-decoration: none;

            line-height:35px ;

            text-align: center;

            color:#333;

        }

        .subnav{

            display:none;

            /* 首先隐藏起来 */

        }

        .subnav li{

            cursor:pointer;

            /* 设置鼠标的样式为小手 */

            height: 30px;

            text-align: center;

            line-height:30px ;

        }

        .nav li:hover .subnav{

            display:block;

            /* 鼠标经过nav的li时显示隐藏的盒子 */

        }

        .subnav li:hover{

            background-color:skyblue ;

            /* 鼠标经过li时变色 */

        }

    </style>