一直觉得二级菜单的出现效果仅仅有js才干控制。今天研究了一下阿里巴巴站点的首页，才发现，原来二级菜单的动态显示也能够使用CSS来控制，原来对CSS是静态的东西一直是误解它了，CSS也能够实现动态的效果，现把主要代码展演示样例如以下：

HTML代码：

  1. <span style="font-size:18px;"><strong><!DOCTYPE html>
  2. <html>
  3.  
  4. <link href="1_files/a.css" rel="stylesheet" type="text/css" media="all">
  5.  
  6.    <div class="ls-cate" data-spm="1997230041">
  7.  
  8. 	<ul>
  9. 		<li>
  10. 			<a href="http://www.alibaba.com/Agriculture_p1">Agriculture</a>
  11. 			<div>
  12. 				<span class="title">Agriculture</span>
  13. 				<a href="http://www.alibaba.com/Rice_pid10106">Rice</a>
  14. 				<a href="http://www.alibaba.com/Apples_pid10301">Apples</a>
  15. 				<a href="http://www.alibaba.com/Olive-Oil_pid20606">Olive Oil</a>
  16. 				<a href="http://www.alibaba.com/catalogs/--100008999">Herbal Cigars & Cigarettes</a>
  17. 				<a href="http://www.alibaba.com/Plant-Animal-Oil_pid136">Plant & Animal Oil</a>
  18. 				<a class="more" href="http://www.alibaba.com/Agriculture_p1">See all categories</a>
  19. 			</div>
  20. 		</li>
  21.  
  22. 	</ul>
  23.  
  24. </div></body></html></strong></span>



CSS代码：

  1. <span style="font-size:18px;"><strong>.ls-cate li div{
  2. 	display:none;
  3. 	position:absolute;
  4. 	z-index:2;
  5. 	left:190px;
  6. 	top:-1px;
  7. 	border:1px solid #DDD;
  8. 	background-color:#FFF;
  9. 	box-shadow:3px 3px 6px #C2C2C2
  10. }
  11.  
  12. .ls-cate li div .title,.ls-cate li div a{
  13. 	display:block;
  14. 	background-color:#FFF
  15. }
  16.  
  17. .ls-cate li:hover div{
  18. 	display:block
  19. }
  20.  
  21. </strong></span>



这仅仅是个最简单的demo。是在阿里巴巴首页源代码的基础上进行改动而成的。喜欢的朋友也能够看我发的一个帖子：

page=1#post-397617443">http://bbs.csdn.net/topics/390817010?page=1#post-397617443

源代码下载地址：

http://download.csdn.net/detail/zkn_cs_dn_2013/7527703



CSS之实现二级菜单动态出现的更多相关文章

  1. python 全栈开发，Day109(客户管理之动态"二级"菜单)

    昨日内容回顾 1. 权限有几张表? 2. 简述权限流程? 3. 为什么要把权限放入session? 4. 静态文件和模块文件 5. 相关技术点 - orm查询 - 去空 - 去重 - 中间件 - in ...

  2. 个人练习：使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  3. css 实现动态二级菜单

    动态实现简单的二级菜单 当鼠标放到一级标签上时,鼠标会变成小手的形状 展示二级菜单,源码如下,复制即可直接使用 <!DOCTYPE html> <html lang="en ...

  4. crm 动态一级二级菜单

    之前代码菜单是写是的 如何 让他 动态 生成了  首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...

  5. 巨蟒django之权限7:动态生成一级&&二级菜单

    内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...

  6. 纯css实现鼠标感应弹出二级菜单

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

  7. html和css实现一级菜单和二级菜单学习笔记

    实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  8. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  9. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

随机推荐

  1. printf的实型

    参  数 说  明 %f 按实数格式输出,整数部分按实际位数输出,6位小数 %m.nf 总位数m(含小数点),其中有n位小数 %-m.nf 同上,左对齐 %0.xf 输出小数点后x位   %f 后面如 ...

  2. Django models的诡异异常RelatedObjectDoesNotExist

    models代码如下: class Course(models.Model): name = models.CharField(unique=True, max_length=64) price = ...

  3. c的二级指针

    ----"c 语言的精华在于指针的灵活性.学好指针的目的在于尽可能少的使用指针." 在敲binary search tree(二叉查找树),遇到了问题.在删除的时候,如果删除的是r ...

  4. CNN结构：色彩特征提取-从RGB空间到HSV空间（色彩冷暖判断）

      转自知乎和百度百科:从零开始学后期             文章: 冷暖色区分?冷暖肤色适用于那些色系的彩妆?    文章:干货 |如何判断人体色冷暖?如何判断色彩冷暖?(值得收藏研读!) -蒜苗 ...

  5. FTP工作原理

    FTP工作原理 FTP两种传输方式:1.ASCII传输2.二进制传输 FTP主被动原理: 主动方式:1.用户与服务器建立控制通道2.客户端发出PORT指令,主动告诉服务器端口号3.服务器主动通过20端 ...

  6. 创建全局函数 匹配查找 std::map

    std::map<CString, CString> m_NameToType; 所有文件之外声明一个函数 在要用到的地方  加入存储的东西 extern std::map<CStr ...

  7. Centos初始化硬盘分区、挂载

    刚刚买了一台服务器,刚买的服务器的数据盘都是需要自己来分区的,下面就记录一下操作. 通过命令fdisk-l查看硬盘信息 可以看到有两块硬盘/dev/vda和/dev/vdb,启动vda是系统盘vdb是 ...

  8. vue中使用Swiper

    第一步:安装swiper在项目目录下打开命令窗口输入命令:npm install swiper 第二步:引入js文件 第三步:引入css文件在main.js文件中引入css文件

  9. Secret of Chocolate Poles （Aizu1378——dp）

    Select Of Chocolate Poles 题意:有一个竖直放置的高度为l cm的盒子,现在有三种方块分别为1cm的白块,1cm的黑块,k cm的黑块,要求第一块放进去的必须是黑色的,盒子最上 ...

  10. HDU - 2159 FATE（二维dp之01背包问题）

    题目: ​ 思路: 二维dp,完全背包,状态转移方程dp[i][z] = max(dp[i][z], dp[i-1][z-a[j]]+b[j]),dp[i][z]表示在杀i个怪,消耗z个容忍度的情况下 ...