Html+Css新手简单快速仿京东商品分类导航_html左侧类别筛选-优快云博客

看一看最终的效果:

下面我们就按照分析→设计→实现三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。

我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告)
京东导航结构
因为我是用纯css+html写的，所以它的文件有:京东导航.html,main.css,cssreset.css(css文件放在css这个目录下面).

接着我们看具体的代码实现(这里我只写了家用电器的二级分类)：
京东导航.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东导航</title>
<link href="css/cssreset.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>

<body>
<nav>
<div class="all">
    <a href="#">全部商品分类</a>
</div>
<ul>
    <li class="nav_item"><a href="#">家用电器</a><span class="jt">&gt;</span>
    <div class="sub_menu">
            <div class="leftmenu">
            <dl>
                <dt><a href="#">大家电</a></dt>
               <dd>
                <a href="#" >平板电视</a>
                <a href="#">空调</a>
                <a href="#">冰箱</a>
                <a href="#">洗衣机</a>
                <a href="#">家庭影院</a>
                <a href="#">DVD</a>
                <a href="#">迷你音响</a>
                <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>
                <a href="#">扫地机器人</a>
                <a href="#">吸尘器</a>
                <a href="#">挂烫机/熨斗</a>
                <a href="#">插座</a>
                <a href="#"> 电话机</a>
                <a href="#">清洁机</a>
                <a href="#">除湿机</a>
                <a href="#">干衣机</a>
                <a href="#">收录/音机</a>
                </dd>
            </dl>  
                  <dl>
                <dt><a href="#">厨房电器