flex导航制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            text-decoration: none;
        }
        a{
            color:#fff;
        }
        nav{
            /*height: 60px;*/
            background-color: red;
        }
        li{
            list-style: none;
            /*padding: 6px 20px;*/
        }
        li:hover{
            background-color: darkred;
        }
        nav>ul{
            /*height: 60px;*/
            /*background-color: cornflowerblue;*/
            display:flex;
            justify-content: center;
            align-items: center;
            /*margin: 10px auto;*/
        }
        nav>ul>li{
            position: relative;
            padding: 10px 20px;
        }
        nav>ul>li>ul{
            background-color:red;
            position:absolute;
            left:0px;
            top: 40px;
            display: none;
        }
        nav>ul>li>ul>li{
            padding: 6px 20px;
        }
        nav>ul>li>ul>li>a{
            /*font-size: 14px;*/
        }
        nav>ul>li:hover>ul{
            display: block;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a href="">首 页</a></li>
        <li><a href="">直 播</a>
            <ul>
                <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>
            <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></li>
        <li><a href="">视频</a></li>
        <li><a href="">网游</a></li>
        <li><a href="">云游戏</a></li>
    </ul>
</nav>
</body>
</html>
更多相关文章

随机推荐
