演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            nav{
                width: 400px;height: 40px;background-color: #222222;
                margin: 100px auto;
                display: flex;justify-content: space-between;
            }
            div{
                width: 100px;height: 40px;
                position: relative;
            }
            div a{
                display: block;width: 100px;
                height: 40px;line-height: 40px;text-align: center;color: white;
                position: absolute;top: 0;left: 0;
            }
            div p{
                width: 100px;height: 3px;
                position: absolute;
                top: -3px;left: 0;
                background-color: #FF0000;
                transform: rotateY(90deg);
            }
            div:hover a{
                background-color: #f00;
                color: #FFFFFF;
            }
            div:hover p{
                transform: rotateY(0deg);
                transition: transform 1s;
            }
        </style>
    </head>
    <body>
        <nav>
            <div>
                <a href="">首页</a>
                <p></p>
            </div>
            <div>
                <a href="">商城</a>
                <p></p>
            </div>
            <div>
                <a href="">论坛</a>
                <p></p>
            </div>
        </nav>
    </body>
</html>
打开支付宝首页搜“559920739”领红包，领到大红包的小伙伴赶紧使用哦！ （如果你觉得本文不错，请扫描下面二维码随意打赏哦）
最后修改：2020 年 09 月 14 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏