console 命令行工具 X clear

console

<body>
    <div class="subnav">
        <ul>
            <li>
                <div>1</div>
            </li>
            <li>
                <div>2</div>
            </li>
            <li>
                <div>3</div>
            </li>
            <li>
                <div>4</div>
            </li>
            <li>
                <div>5</div>
            </li>
        </ul>

    </div>
</body>

    * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .subnav {
            margin: 100px auto;
            width: 30px;
        }

        .subnav li {
            width: 30px;
            height: 30px;
            margin: 3px;
            background-color: blueviolet;
            position: relative;
            /* z-index: 0; */
        }

        .subnav div {
            position: absolute;
            right: 0;
            top: 0;
            height: 30px;
            width: 0px;
            background-color: pink;
            transition: all 0.6s;
            z-index: -1;
        }

        .subnav li:hover div {
            width: 100px;
        }