PC端纯css二级栏目导航条

最新推荐文章于 2022-11-23 07:00:00 发布

地上马

最新推荐文章于 2022-11-23 07:00:00 发布

阅读量3k

点赞数

分类专栏： HTML5 文章标签：纯css 简洁兼容性强

本文链接：https://blog.csdn.net/wuxiang668/article/details/53670997

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

很简洁，代码如下(可兼容手机)，有问题请留言：

<!doctype html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="gbk">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Name: 地上马, Mail: linjialiang@163.com">
    <title>PC端纯css二级栏目导航条</title>
    <meta name="keywords" content="以英文逗号隔开, 逗号后面空一格">
    <meta name="description" content="以英文逗号隔开, 逗号后面空一格[不超过150个字符]">
    <style>
        /*公共部分*/
        html{font-size:10px;}
        body, div, dl, dt, dd, a{margin:0; paddding:0;}
        a{text-decoration:none;}
        /*头部导航*/
        .header-nav{width: 100%;text-align: center;font: 16px/48px "微软雅黑";background-color: #851b1b;}
        .header-nav a{color: #f9f6f1;}
        .header-nav dl{width: 118px;display: inline-block;position: relative;}
        .header-nav dd{display: none;position: absolute; z-index:1; top: 3em;left: 0;min-width: 118px;background-color: #851b1b;}
        .header-nav dd a{display: block;white-space: nowrap;line-height: 1.8em;text-align: left;padding: 0 10px;}

        /*hover 属性*/
        .header-nav dl:hover a{color: white;}
        .header-nav dl:hover a:hover{font-size: 110%;}
        .header-nav dl:hover > dd{display: block;padding: 5px 0;}
        .header-nav dl:hover > dd a:hover{background-color: #f9f6f1;color: #851b1b ;}

        /*media*/
        @media screen and (max-width:960px){
            .header-nav{font-size:0;}
            .header-nav dl{font-size:16px;}
            .header-nav dl {width:25%;}
            .header-nav dl > dd{width:100%;}
            .header-nav dl > dd a{text-align:center; overflow-x:auto;}
        }
        @media screen and (max-width:480px) and (min-width:320px){
            .header-nav dl {width:50%;}
        }

    </style>
</head>

<body>
    <div class="header-nav bg-f9f6f1 color-f9f6f1">
        <dl>
            <dt><a href="#">这是一级栏目</a></dt>
            <dd>
                <a href="#">这是子栏目这是子栏目这是子栏目这是子栏目</a>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="#">这是一级栏目</a></dt>
            <dd>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="#">这是一级栏目</a></dt>
            <dd>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="#">这是一级栏目</a></dt>
            <dd>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="#">这是一级栏目</a></dt>
            <dd>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="#">这是一级栏目</a></dt>
            <dd>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="#">这是一级栏目</a></dt>
            <dd>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
            </dd>
        </dl>
        <dl>
            <dt><a href="#">这是一级栏目</a></dt>
            <dd>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
                <a href="#">这是子栏目</a>
            </dd>
        </dl>
    </div>
</body>

</html>