/ css

css-transition

通过 css-transition 实现二级菜单

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    a {
        text-decoration: none;
    }

    .nav {
        display: inline-block;
        height: 50px;
        margin: 0 auto;
    }

    .nav li {
        float: left;
        width: 100px;
        height: 50px;
        background-color: black;
        line-height: 50px;
        text-align: center;
    }

    .nav li a {
        display: block;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 20px;
    }

    .nav>li {
        position: relative;
    }

    .nav .sub {
        position: absolute;
        overflow: hidden;
        /*必须用overflow,不然内容会挤出去,就算设置高度为零也没意义*/
        top: 50px;
        left: 0;
        height: 0;
        transition: height 1s;
    }

    .nav:hover .sub {
        /* 固定高度,能显示的二级菜单数受限,但二级菜单的高度统一 */
        height: 200px;
    }
    </style>
</head>

<body>
    <ul class="nav">
        <li><a href="">上衣</a>
            <ul class="sub">
                <li><a href="">夹克</a></li>
                <li><a href="">衬衫</a></li>
                <li><a href="">羽绒服</a></li>
                <li><a href="">毛线衣</a></li>
            </ul>
        </li>
        <li><a href="">裤子</a>
            <ul class="sub">
                <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>
                <li><a href="">西裤</a></li>
                <li><a hrf="">休闲裤</a></li>
                <li><a href="">工装裤</a></li>
                <li><a href="">牛仔裤</a></li>
            </ul
        </li>
        <li><a href="">配饰</a>
            <ul class="sub">
                <li><a href="">眼镜</a></li>
                <li><a href="">领带</a></li>
                <li><a href="">手表</a></li>
                <li><a href="">腰带</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>