css实现商城商品导航栏

最新推荐文章于 2023-04-08 18:54:17 发布

java是最好的语言

最新推荐文章于 2023-04-08 18:54:17 发布

阅读量4.1k

点赞数 3

分类专栏： js 文章标签： css 商城导航栏京东

本文链接：https://blog.csdn.net/sinat_34498624/article/details/53913884

版权

效果图：

这里写图片描述

看着是不是有点眼熟呢，这个就是京东之前的导航栏！下面我们通过纯css来实现这个效果-，-

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="jd.css">
</head>
<body>
    <div>   

    <ul class="topmenu">
        <div class="toptitle">全部商品分类</div>


         <li><a href="#">图书、音像、数字商品</a><span></span> 
            <div class="submenu">
                <div class="leftdiv">
                    <dl>
                        <dt><a href="#">电子书</a></dt>
                        <dd>
                            <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
                            <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">数字音乐</a></dt>
                        <dd>
                            <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <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> <a href="#">游戏</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">文艺</a></dt>
                        <dd>
                            <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
                                href="#">艺术</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">人文社科