使用伸缩盒标签制作一个首页的二级分类

程序员文章站 2022-03-07 19:40:25

...

使用伸缩盒标签制作一个首页的二级分类


<head>
    <meta charset="utf-8">
    <title>弹性盒模式二级导航按钮</title>
    <style type="text/css">
        body，nav,ul{
            margin: 0px;
            padding: 0px;
        }
        nav>ul{
            display: flex;
            background-color: aquamarine;
            justify-content: center;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        nav>ul>li{
            padding: 10px 20px;
            position: relative; 
        }
        nav>ul>li:hover,nav>ul>li>ul>li:hover{
            background-color: chocolate;
        }
        nav>ul>li>ul{
            position: absolute;
            /* border: 1px solid #D2691E; */
            top:40px;
            left:0px;
            display: none;
        }
        nav>ul>li>ul>li{
            background-color: #7FFFD4;
            padding: 10px 20px;
        }
        nav>ul>li:hover>ul{
            display: block;

        }





    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">公司简介</a></li>
            <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></li>
        </ul>

    </nav>
</body>

上一篇： html整体页面边距怎么设置

下一篇：第三课-盒子模型-导航栏