css实现商城商品导航栏

最新推荐文章于 2022-07-09 20:58:53 发布

java是最好的语言

最新推荐文章于 2022-07-09 20:58:53 发布

阅读量4.1k

点赞数 3

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

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

版权

这篇博客通过纯CSS技术详细介绍了如何制作一款类似京东商城的导航栏，包括HTML结构、CSS样式设置以及解决IE浏览器的hover兼容问题。通过简单的div+ul+li布局，结合hover伪类实现鼠标悬停效果。

摘要由CSDN通过智能技术生成

效果图：

这里写图片描述

看着是不是有点眼熟呢，这个就是京东之前的导航栏！下面我们通过纯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="#">人文社科