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

首页 > 博客列表 > 使用伸缩盒标签制作一个首页的二级分类

博主信息

博文 8

粉丝 0

访问量 7225

专题推荐

更多>

<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>

批改老师：

PHPz

批改状态：合格

老师批语：可以适当添加效果图

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML标签01

2021-11-10 13:05:29