使用列表实现导航嵌套（ul、ol、display：block/none的使用）

最新推荐文章于 2022-05-13 21:01:24 发布

VIP文章康立志

最新推荐文章于 2022-05-13 21:01:24 发布

阅读量785

点赞数

本文链接：https://blog.csdn.net/weixin_44011306/article/details/106243800

版权

使用列表实现导航嵌套

效果展示
代码
- HTML
- CSS

效果展示

在这里插入图片描述

代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>study27</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>
<div class="mr-box">
    <div class="mr-nav">
        <ul>
            <li class="mr-hover"><a href="#">商品分类</a>
                <ol class="mr-item">
                    <li><a href="#">女装 /内衣</a></li>
                    <li><a href="#">男装 /运动户外</a></li>
                    <li><a href="#">女鞋 /男鞋 /箱包</a></li>
                    <li><a href="#">化妆品 /个人护理</a></li>
                    <li><a href="#">腕表 /饰品 /眼镜</a></li>
                    <li><a href="#">手机 /数码 /办公</a></li>
                    <li><a href="#">零食 /食品 /茶酒</a></li>
                    <li><a href="#"> 生鲜水果</a></li>
                    <li><a href="#">生活电器</a></li>
                </ol>
            </li>
            <li class="mr-hover"><a href="#">春节特卖</a>
                <ul class="mr-shopbox">
                    <li><a href="#">服装服饰</a></li>
                    <li><a href="#">母婴会场</a></li>
                    <li><a href="#">数码家电</a></li>
                    <li>&l

最低0.47元/天解锁文章

康立志

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用列表实现导航嵌套（ul、ol、display：block/none的使用）

使用列表实现导航嵌套效果展示代码HTMLCSS效果展示代码HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>study27</title> <link href="main.css" rel="stylesheet"></head><body><div cla
复制链接

扫一扫