学完制作出这个导航效果之后，收获最多的是了解了hover选择器的功能，:hover 选择器用于选择鼠标指针浮动在上面的元素。在鼠标移到元素上时向此元素添加特殊的样式（CSS）。例如：改变鼠标悬停处的元素或其子元素的边框，颜色，大小，显示等。

每天积累一点，定会有所进步！

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             body {
  8.                 padding: 0;
  9.                 font-size: 10pt;
  10.             }
  11.  
  12.             .topmenu {
  13.                 display: block;
  14.                 width: 220px;
  15.                 border: 2px solid #e4393c;
  16.                 margin: 0;
  17.                 padding: 0;
  18.             }
  19.  
  20.             .toptitle {
  21.                 height: 40px;
  22.                 line-height: 40px;
  23.                 text-align: left;
  24.                 font-size: 11pt;
  25.                 font-weight: bold;
  26.                 color: white;
  27.                 background: #E4393C;
  28.                 padding-left: 20px;
  29.             }
  30.  
  31.             .topmenu li {
  32.                 height: 30px;
  33.                 line-height: 30px;
  34.                 font-size: 11pt;
  35.                 /*去除li小圆点*/
  36.                 list-style-type: none;
  37.                 text-align: left;
  38.                 padding-left: 8px;
  39.                 z-index: 3;
  40.                 background-image: url(../../img/20161116/1.jpg);
  41.                 background-repeat: no-repeat;
  42.                 background-position: right;
  43.             }
  44.             /*hover效果为鼠标移动到上面触发相应效果*/
  45.  
  46.             .topmenu li:hover {
  47.                 border: 1px solid #DDD;
  48.                 border-right: 0;
  49.                 box-shadow: 0 0 8px #DDD;
  50.                 -webkit-box-shadow: 0 0 8px #DDD;
  51.                 background-image: none;
  52.             }
  53.  
  54.             .topmenu li a {
  55.                 /*去除下划线*/
  56.                 text-decoration: none;
  57.                 color: #313131;
  58.             }
  59.  
  60.             .topmenu li a:hover {
  61.                 text-decoration: underline;
  62.                 font-weight: bold;
  63.                 color: #e4393c;
  64.             }
  65.  
  66.             .submenu {
  67.                 display: none;
  68.                 width: 715px;
  69.                 left: 220px;
  70.                 position: absolute;
  71.                 top: 40px;
  72.                 border: 1px solid #DDD;
  73.                 z-index: 4;
  74.                 background: white;
  75.                 box-shadow: 0 0 8px #DDD;
  76.                 -webkit-box-shadow: 0 0 8px #DDD;
  77.             }
  78.             /*鼠标移上时显示类submenu模块*/
  79.             .topmenu li:hover .submenu {
  80.                 display: block;
  81.             }
  82.  
  83.             .topmenu li:hover span {
  84.                 background: white;
  85.                 display: inline-block;
  86.                 z-index: 20;
  87.                 width: 20px;
  88.                 height: 30px;
  89.                 float: right;
  90.                 position: relative;
  91.             }
  92.  
  93.             .leftdiv {
  94.                 background: white;
  95.                 float: left;
  96.                 width: 490px;
  97.                 margin: 5px;
  98.             }
  99.  
  100.             .rightdiv {
  101.                 background: white;
  102.                 float: left;
  103.                 width: 200px;
  104.                 margin: 5px;
  105.             }
  106.             .leftdiv dl{
  107.                 display: block;
  108.                 border-bottom: 1px solid #EEE;
  109.                 padding-bottom: 6px;
  110.                 overflow: hidden;
  111.             }
  112.             .leftdiv dl dt{
  113.                 display: block;
  114.                 float: left;
  115.                 width: 60px;
  116.                 text-align: right;
  117.                 height: 22px;
  118.                 line-height: 22px;
  119.                 padding-right: 6px;
  120.             }
  121.  
  122.             .leftdiv dl dt a{
  123.                 color: #e4393c;
  124.                 font-weight: bold;
  125.                 text-decoration: underline;
  126.                 font-size: 10pt;
  127.             }
  128.             .leftdiv dl dd{
  129.                 display: block;
  130.                 overflow: hidden;
  131.             }
  132.             .leftdiv dl dd a{
  133.                 /* 在此插入CSS样式 */
  134.                 color: #737373;
  135.                 font-size: 9pt;
  136.                 padding: 0 8px;
  137.                 height: 14px;
  138.                 line-height: 14px;
  139.                 margin: 4px 0;
  140.             }
  141.  
  142.             .rightdiv dl dd{
  143.                 margin: 3px 0;
  144.             }
  145.  
  146.             .rightdiv dl dt{
  147.                 color: #e4393c;
  148.                 font-weight: bold;
  149.                 font-size: 10pt;
  150.             }
  151.  
  152.             .rightdiv dl dd a{
  153.                 font-size: 9pt;
  154.                 color: #737373;
  155.                 line-height: 22px;
  156.             }
  157.             .rightdiv dl dd a:hover{
  158.                 color: #737373;
  159.                 font-weight: normal;
  160.             }
  161.         </style>
  162.     </head>
  163.  
  164.     <body>
  165.         <ul class="topmenu">
  166.             <div class="toptitle">
  167.                 全部商品分类
  168.             </div>
  169.             <li><a href="#">图书、音像、数字商品</a><span></span>
  170.             <div class="submenu">
  171.                 <div class="leftdiv">
  172.                     <dl>
  173.                         <dt><a href="#">电子书</a></dt>
  174.                         <dd>
  175.                             <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
  176.                             <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
  177.                         </dd>
  178.                     </dl>
  179.                     <dl>
  180.                         <dt><a href="#">数字音乐</a></dt>
  181.                         <dd>
  182.                             <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
  183.                             <a href="#">乡村民谣</a> <a href="#">有声读物</a>
  184.                         </dd>
  185.                     </dl>
  186.                     <dl>
  187.                         <dt><a href="#">音像</a></dt>
  188.                         <dd>
  189.                             <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
  190.                         </dd>
  191.                     </dl>
  192.                     <dl>
  193.                         <dt><a href="#">文艺</a></dt>
  194.                         <dd>
  195.                             <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
  196.                                 href="#">艺术</a>
  197.                         </dd>
  198.                     </dl>
  199.                     <dl>
  200.                         <dt><a href="#">人文社科</a></dt>
  201.                         <dd>
  202.                             <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
  203.                             <a href="#">哲学/宗教</a> <a href="#">社会科学</a>
  204.                         </dd>
  205.                     </dl>
  206.                     <dl>
  207.                         <dt><a href="#">经管励志</a></dt>
  208.                         <dd>
  209.                             <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
  210.                         </dd>
  211.                     </dl>
  212.                     <dl class="fore7">
  213.                         <dt><a href="#">生活</a></dt>
  214.                         <dd>
  215.                             <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
  216.                             <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
  217.                             <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
  218.                         </dd>
  219.                     </dl>
  220.                     <dl>
  221.                         <dt><a href="#">科技</a></dt>
  222.                         <dd>
  223.                             <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
  224.                                 工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
  225.                         </dd>
  226.                     </dl>
  227.                     <dl>
  228.                         <dt><a href="#">少儿</a></dt>
  229.                         <dd>
  230.                             <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
  231.                             <a href="#">11-14岁</a>
  232.                         </dd>
  233.                     </dl>
  234.                     <dl>
  235.                         <dt><a href="#">教育</a></dt>
  236.                         <dd>
  237.                             <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
  238.                         </dd>
  239.                     </dl>
  240.                     <dl>
  241.                         <dt><a href="#">其它</a></dt>
  242.                         <dd>
  243.                             <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
  244.                             <a href="#">杂志/期刊</a>
  245.                         </dd>
  246.                     </dl>
  247.                 </div>
  248.                 <div class="rightdiv">
  249.                     <dl>
  250.                         <dd>
  251.                             <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
  252.                                 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
  253.                                     width="194" height="70" title="\家电">
  254.                             </a>
  255.                         </dd>
  256.                         <dd>
  257.                             <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
  258.                                 <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
  259.                                     width="194" height="70" title="小家电--三请聚宝盆">
  260.                             </a>
  261.                         </dd>
  262.                     </dl>
  263.                     <dl>
  264.                         <dt>推荐品牌</dt>
  265.                         <dd>
  266.                             <a href="#">美的官方旗舰店</a>
  267.                         </dd>
  268.                         <dd>
  269.                             <a href="#">苏泊尔旗舰店</a>
  270.                         </dd>
  271.                         <dd>
  272.                             <a href="#">九阳旗舰店</a>
  273.                         </dd>
  274.                         <dd>
  275.                             <a href="#">东菱旗舰店</a>
  276.                         </dd>
  277.                         <dd>
  278.                             <a href="#">海尔统帅旗舰店</a>
  279.                         </dd>
  280.                         <dd>
  281.                             <a href="#">小熊旗舰店</a>
  282.                         </dd>
  283.                     </dl>
  284.                     <img src="wii.png" class="rightPic" />
  285.                 </div>
  286.             </div>
  287.         </li>
  288.             <li>
  289.                 <a href="#">家用电器</a>
  290.             </li>
  291.             <li>
  292.                 <a href="#">手机、数码</a>
  293.             </li>
  294.             <li>
  295.                 <a href="#">电脑、办公</a>
  296.             </li>
  297.             <li>
  298.                 <a href="#">家居、家具、家装、厨具</a>
  299.             </li>
  300.             <li>
  301.                 <a href="#">服饰内衣、珠宝首饰</a>
  302.             </li>
  303.             <li>
  304.                 <a href="#">个护化妆</a>
  305.             </li>
  306.             <li>
  307.                 <a href="#">鞋靴、箱包、钟表、奢侈品</a>
  308.             </li>
  309.             <li>
  310.                 <a href="#">运动户外</a>
  311.             </li>
  312.             <li>
  313.                 <a href="#">汽车用品</a>
  314.             </li>
  315.         </ul>
  316.     </body>
  317.  
  318. </html>

CSS实现商城分类导航效果（hover选择器）的更多相关文章

  1. 二、JavaScript语言--JS实践--商城分类导航效果

    商城类导航菜单制作(以京东为例--竖向列表横向伸缩) 可以用两种方式来实现:用CSS实现和用JS实现 方法一:用CSS实现(要点:使用hover) <!DOCTYPE html PUBLIC & ...

  2. 商城分类导航实现 （css)

    代码实例:demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  3. PHP 根据子ID递归获取父级ID，实现逐级分类导航效果

    代码: //当前路径 $cate=M('wangpan_class')->select(); function get_top_parentid($cate,$id){ $arr=array() ...

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

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

  5. css实现鼠标经过导航文字偏位效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

    问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...

  7. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  8. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  9. css:hover选择器

    :hover 选择器用于选择鼠标指针浮动上面的元素. :hover选择器可以用于所有的元素,不单是链接. 提示::link选择器设置指向未被访问页面的链接的样式,:visited选择器用于设置指向已被 ...

随机推荐

  1. Python 数据库备份脚本

    #!/usr/bin/python########################################################### Created date: 2017/12/7 ...

  2. 如何搭建一个B2B电商的跨境系统网站？

    国内的B2B跨境电商系统开发定制如何做才符合标准?商家怎么搭建专属的电商供应链系统?目前并不是大多数电商行业的公司可以应对得起组建团队来做,下面分享下大概的建设供应链商城网站思路和步骤(以数商云跨境电 ...

  3. TCP/IP协议栈 -----链路层

    这节说一下链路层和ARP RARP协议 链路层: 在协议栈中链路层的目的有三个:1. 为IP模块发送或接受数据包 2.为ARP模块发送或接受ARP请求 3. 为RARP模块发送或接受RARP请求. 让 ...

  4. sklearn 中 make_blobs模块使用

    sklearn.datasets.make_blobs(n_samples=100, n_features=2, centers=3, cluster_std=1.0, center_box=(-10 ...

  5. HBase存储剖析与数据迁移

    1.概述 HBase的存储结构和关系型数据库不一样,HBase面向半结构化数据进行存储.所以,对于结构化的SQL语言查询,HBase自身并没有接口支持.在大数据应用中,虽然也有SQL查询引擎可以查询H ...

  6. POJ 3923 HDU 2487 Ugly Windows 简单计算

    Ugly Windows Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tot ...

  7. 51Nod--1051最大子矩阵和（DP入门）

    分析: 我们已经解决了一维的问题(基础篇中的最大子段和问题),现在变成二维了,我们看看能不能把这个问题转化为一维的问题.最后子矩阵一定是在某两行之间的.假设我们认为子矩阵在第i行和第j列之间,我们如何 ...

  8. Android 项目使用TensorFlow

    Android 项目使用TensorFlow 首先需要搭建TensorFlow编译环境 参考:(http://www.cnblogs.com/dyufei/p/8027764.html) Tensor ...

  9. WeChat 隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  10. Hadoop介绍和环境配置

    原文:http://www.cnblogs.com/edisonchou/ 一.Hadoop的发展历史 说到Hadoop的起源,不得不说到一个传奇的IT公司-全球IT技术的引领者Google.Goog ...