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

HTML代码：

<span style="font-size:18px;"><strong><!DOCTYPE html>

<html>

<link href="1_files/a.css" rel="stylesheet" type="text/css" media="all">

   <div class="ls-cate" data-spm="1997230041">

	<ul>

		<li>

			<a href="http://www.alibaba.com/Agriculture_p1">Agriculture</a>

			<div>

				<span class="title">Agriculture</span>

				<a href="http://www.alibaba.com/Rice_pid10106">Rice</a>

				<a href="http://www.alibaba.com/Apples_pid10301">Apples</a>

				<a href="http://www.alibaba.com/Olive-Oil_pid20606">Olive Oil</a>

				<a href="http://www.alibaba.com/catalogs/--100008999">Herbal Cigars & Cigarettes</a>

				<a href="http://www.alibaba.com/Plant-Animal-Oil_pid136">Plant & Animal Oil</a>

				<a class="more" href="http://www.alibaba.com/Agriculture_p1">See all categories</a>

			</div>

		</li>

	</ul>

</div></body></html></strong></span>



CSS代码：

<span style="font-size:18px;"><strong>.ls-cate li div{

	display:none;

	position:absolute;

	z-index:2;

	left:190px;

	top:-1px;

	border:1px solid #DDD;

	background-color:#FFF;

	box-shadow:3px 3px 6px #C2C2C2

}

.ls-cate li div .title,.ls-cate li div a{

	display:block;

	background-color:#FFF

}

.ls-cate li:hover div{

	display:block

}

</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. display:none 和 hidden 区别

  2. 【洛谷3224/BZOJ2733】[HNOI2012]永无乡 (Splay启发式合并)

    题目: 洛谷3224 分析: 这题一看\(n\leq100000\)的范围就知道可以暴力地用\(O(nlogn)\)数据结构乱搞啊-- 每个联通块建一棵Splay树,查询就是Splay查询第k大的模板 ...

  3. android sqlite中判断某个表是否存在

    <span style="font-size:18px;">sqlite 中判断某个表是否存在的方法,贴出来供大家参考 /** * 判断某张表是否存在 * @param ...

  4. 【转】mysql的数据类型

    转自:http://mrxiong.blog.51cto.com/287318/1651098 一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括严格数据类型(INTEGER,SMALL ...

  5. Sqoop 产生背景（一）

    Sqoop 的产生主要源于: 1.目前很多使用hadoop技术的企业,有大量的数据存储在传统关系型数据库中. 2.早期由于工具的缺乏,hadoop与传统数据库之间的数据传输非常困难. 1)传统数据库中 ...

  6. vb.net实现textbox控件输入指定位数小数方法实现。

    Private Sub textbox1_KeyPress(ByVal sender As System.Object, ByVal e As System.Windows.Forms.KeyPres ...

  7. P2639 [USACO09OCT]Bessie的体重问题Bessie's We…

    题目描述 Bessie像她的诸多姊妹一样,因为从Farmer John的草地吃了太多美味的草而长出了太多的赘肉.所以FJ将她置于一个及其严格的节食计划之中.她每天不能吃多过H (5 <= H & ...

  8. 阿里云虚拟主机针对恶意频繁攻击式访问造成CPU爆满的解决方法

    最近网站CPU经常爆满,到阿里云提交了工单,工程师给我的处理意见:   您好,虚拟主机CPU占用比较高通常这种情况有两种可能:   一是网站应用程序代码逻辑较复杂,或业务架构效率比较低,在请求了某个网 ...

  9. lamlmzhang的新博客开通了，欢迎大家的关注

    从这里开始lamlmzhang的java开发之路~!

  10. Java程序员2016年终总结

    回顾2016年, 很庆幸,自己能在2016年年尾找到一份满意的web后台开发工作.这也是我学习编程以来第一份开发工作,我很是珍惜. 还记得大三接触了Java的JFrame编写的坦克大战之后,就对编程产 ...