纯CSS代码实现导航菜单，推荐在chrome预览！

预览请点击这里：mygithub

 <!doctype html>

 <html lang="en">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="keywords" content="关键字1,关键字2" />

 <meta name="Description" content="描述信息" />

 <title>Document</title>

 <!--CSS/JS-->

 <style type="text/css">

 *{margin:0;padding:0;}

 ul,li{list-style:none;}

 body{font-size:14px;font-family:"微软雅黑";}

 .top-menu{display:block;border:2px solid #e4393c;width:220px;}

 .top-title{background:#e4393c;color:white;height:30px;line-height:30px;font-size:14px;padding-left:10px;}

 .top-menu li{display:block;padding-left:8px;height:30px;line-height:30px;background-image:url(1.jpg);background-repeat:no-repeat;background-position:right;}

 .top-menu li:hover{background:none;border:1px solid #ddd;box-shadow:0 0 8px #ddd;z-index:3;}

 .top-menu a{text-decoration:none;color:black;}

 .top-menu a:hover{font-weight:900;text-decoration:underline;color:#e4393c;}

 .content{background:white;position:absolute;left:210px;top:30px;display:none;box-shadow:0 0 8px #ddd;z-index:4px;}

 .content .div-left{width:500px;float:left;margin:5px;}

 .content .div-right{width:220px;float:left;margin:5px;}

 .top-menu li:hover .content{display:block;}

 .top-menu li:hover span{position:relative;width:20px;height:30px;display:inline-block;float:right;background:white;z-index:20;}

 .div-left dl{display:block;overflow:hidden;padding-bottom:6px;border-bottom: 1px solid #EEE;}

 .div-left dl dt{display:block;height:22px;width:60px;line-height:22px;text-align:right;float:left;padding-right:6px;}

 .div-left dl dd{display:block;overflow:hidden;}

 .div-left dl dt a{color: #e4393c;font-weight: bold;text-decoration: underline;

 font-size: 10pt;}

 .div-left dl dd a{ display:block;float:left;border-left:1px solid #CCC;color: #737373;font-size: 9pt;padding: 0 8px;height: 14px;line-height: 14px;margin: 4px 0;}

 .div-right dl{margin:13px;}

 .div-right dl dt{color: #e4393c;font-weight: bold;}

 </style>

 <script type="text/javascript">

 </script>

 </head>

 <body>

 <!--div-->

 <ul class="top-menu">

 <div class="top-title">全部商品分类</div>

 <li><a href="#">图书、音像、数字商品</a><span></span>

 <div class="content">

 <div class="div-left">

 <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="#">人文社科</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 class="fore7">

 <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>

 </dd>

 </dl>

 <dl>

 <dt><a href="#">科技</a></dt>

 <dd>

 <a href="#">科普</a> <a href="#">IT</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="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>

 <a href="#">11-14岁</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>

 </div>

 <div class="div-right">

 <dl>

 <dt><a href="#"><img src="ad1.jpg" width="194" height="70" alt="1折秒家电"></a></dt>

 <dt><a href="#"><img src="ad2.jpg" width="194" height="70" alt="小家电引爆红六月"></a></dt>

 <dt>推荐品牌</dt>

 <dd><a href="#">美的官方旗舰店</a></dd>

 <dd><a>苏泊尔旗舰店</a></dd>

 <dd><a href="#">九阳旗舰店</a></dd>

 <dd><a href="#">东陵旗舰店</a></dd>

 <dd><a href="#">海尔统帅旗舰店</a></dd>

 <dd><a href="#">小熊旗舰店</a></dd>

 </dl>

 </div>

 </div>

 </li>

 <li><a href="#">家用电器</a><span></span>

 <div class="content">

 <div class="div-left">

 <dl>

 <dt><a href="#">电视</a></dt>

 <dd>

 <a href="#">12.12狂欢</a><a href="#">合资品牌</a> <a href="#">国产品牌</a> <a href="#">互联网品牌</a>

 </dd>

 <dt><a href="#">空调</a></dt>

 <dd>

 <a href="#">壁挂式空调</a> <a href="#">柜式空调</a> <a href="#">中央空调空调配件</a>

 </dd>

 <dt><a href="#">洗衣机</a></dt>

 <dd>

 <a href="#">滚筒洗衣机</a> <a href="#">洗烘一体机</a> <a href="#">波轮洗衣机</a> <a href="#">迷你洗衣机</a> <a href="#">洗衣机配件</a>

 </dd>

 <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>

 </dd>

 <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>

 </dd>

 <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> <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>

 <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> <a href="#">干衣机</a> <a href="#">清洁机</a> <a href="#">收录/音机</a> <a href="#">其它生活电器</a> <a href="#">生活电器配件</a>

 </dd>

 <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>

 <dt><a href="#">家庭影音</a></dt>

 <dd>

 <a href="#">家庭影院</a> <a href="#">迷你音响</a> <a href="#">DVD</a> <a href="#">电视影音配件</a>

 </dd>

 <dt><a href="#">进口电器</a></dt>

 <dd>

 <a href="#">进口电器</a>

 </dd>

 </dl>

 </div>

 <div class="div-right">

 <dl>

 <dt><a href="#"><img src="ad1.jpg" width="194" height="70" alt="1折秒家电"></a></dt>

 <dt><a href="#"><img src="ad2.jpg" width="194" height="70" alt="小家电引爆红六月"></a></dt>

 <dt>推荐品牌</dt>

 <dd><a href="#">美的官方旗舰店</a></dd>

 <dd><a>苏泊尔旗舰店</a></dd>

 <dd><a href="#">九阳旗舰店</a></dd>

 <dd><a href="#">东陵旗舰店</a></dd>

 <dd><a href="#">海尔统帅旗舰店</a></dd>

 <dd><a href="#">小熊旗舰店</a></dd>

 </dl>

 </div>

 </div>

 </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>

 <li><a href="#">母婴、玩具乐器</a></li>

 <li><a href="#">食品饮料、酒类、生鲜</a></li>

 <li><a href="#">营养保健</a></li>

 </ul>

 </body>

 </html>

纯css实现京东导航菜单的更多相关文章

  1. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  2. 纯CSS下拉导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...

  3. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  4. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  5. HTML+CSS代码橙色导航菜单

    效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...

  6. 用css实现三级导航菜单

    主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...

  7. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  8. Jquery学习笔记（8）--京东导航菜单（2）增加弹框

    京东导航,添加中间的弹框栏,使用position定位,放在左侧栏的li标签里面,成为一个整体,保证鼠标在弹框里的时候,弹框不消失: <!DOCTYPE html> <html lan ...

  9. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

随机推荐

  1. bitmap 加载的时候出现OOM，nullpointer

    1.OOM :对图片进行压缩,效果还不错:http://182.92.150.15:9876/static/server/topic_user/8068/201506/e5b37fec-0919-11 ...

  2. android 菜单的总结

    安卓菜单有三种菜单. 选项菜单: 点击系统菜单按钮会触发 上下文菜单:长按屏幕触发 子菜单:某一个菜单的下一级菜单 具体的描叙:http://blog.csdn.net/zqiang_55/artic ...

  3. UVa 136 - Ugly Numbers

    题目大意:只有素因子2,3,5的数叫做丑数.输出第1500个丑数即可. 这个...好吧,直接输出就是了.自己写一个小程序先计算一下,这就是黑盒测试的好处啊,“我们的目标是解决问题,而不是为了写程序而写 ...

  4. Variation of e.touches, e.targetTouches and e.changedTouches

    We have the following lists: touches: A list of information for every finger currently touching the ...

  5. OC--类型为ID 的类的名称

    NSString *str = [[view class] description];

  6. 差分硬盘的merge（合并差异）实验分析

    实验: 1:在c:中新建father.vhd,及其差分硬盘son.vhd,command: diskpart create vdisk file=c:\father.vhd        #建立父硬盘 ...

  7. centos 修改/etc/fstab后无法启动

    今天做实验,增加了一个磁盘sdb1,而且也增加了自动挂载的功能/etc/fstab里增加了记录. 重新启动服务器的时候,系统启动不了了. 系统提示: 按提示 输入 root的密码,进入以Repair ...

  8. [c#]解决方案：需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping。

    问题详情 如下图所示(部分): 出现该错误,是因为应用程序中需要使用到jquery(现在的web应用程序哪个能离开jquery呢),而目前程序目录中并没有jquery文件,或者有jquery文件但是程 ...

  9. 2. 托管对象数据模型的基本知识（Core Data 应用程序实践指南）

    第一章的例子配置好了持久化存储区.持久化存储协调器.托管对象上下文.但是还没有对象图,本章要介绍托管对象模型的基础知识,并配置范例程序的对象图. 2.1. 托管对象模型是什么 托管对象模型是一种数据结 ...

  10. CentOS 7.0编译安装Nginx1.6.0+MySQL5.6.19+PHP5.5.14方法分享

    一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: systemctl stop fi ...