CSS之实现二级菜单动态出现
一直觉得二级菜单的出现效果仅仅有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之实现二级菜单动态出现的更多相关文章
- python 全栈开发，Day109(客户管理之动态"二级"菜单)
昨日内容回顾 1. 权限有几张表? 2. 简述权限流程? 3. 为什么要把权限放入session? 4. 静态文件和模块文件 5. 相关技术点 - orm查询 - 去空 - 去重 - 中间件 - in ...
- 个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- css 实现动态二级菜单
动态实现简单的二级菜单 当鼠标放到一级标签上时,鼠标会变成小手的形状 展示二级菜单,源码如下,复制即可直接使用 <!DOCTYPE html> <html lang="en ...
- crm 动态一级二级菜单
之前代码菜单是写是的 如何 让他 动态 生成了 首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...
- 巨蟒django之权限7:动态生成一级&&二级菜单
内容回顾: . 权限的控制 . 表结构设计 存权限的信息 用户表 - name 用户名 - pwd 密码 - roles 多对多 角色表 - name - permissions 多对多 权限表 - ...
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html和css实现一级菜单和二级菜单学习笔记
实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- css案例学习之ul li dl dt dd实现二级菜单
效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
随机推荐
- ACM_小游戏（棋盘博弈）
Problem Description: 最近kiki无事可做,于是他想玩棋盘游戏.棋盘的大小是n * m.首先,棋子放置在右上角(1,m). 每次可以将棋子向左方,下方或左下方移动一个位置.当移动到 ...
- action="post" 、 servletconfig 、 servletcontext 、getPrintWiter() 、context-param、 init-param(第一个完整的servlet)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery——节点操作
创建节点 1.$():创建一个li标签 $("<li class='aaa'>我是li标签</li>") 2.html():创建一个li标签并同时添加到ul ...
- java攻城狮之路--复习JDBC(数据库连接池 ： C3P0、DBCP)
复习数据库连接池 : C3P0.DBCP 1.数据库连接池技术的优点: •资源重用: 由于数据库连接得以重用,避免了频繁创建,释放连接引起的大量性能开销.在减少系统消耗的基础上,另一方面也增 ...
- 【YOLO】只检测人
一.修改源代码 cfg/coco.data classes= #修改成1 train = /home/pjreddie/data/coco/trainvalno5k.txt valid = coco_ ...
- 大神所写的深度好文---Gradle 构建工具
什么是构建工具? 我们大家都知道 Gradle 是一种构建工具,那么什么是构建工具呢? 网上一大堆的文字解释我觉得很难理解,这里我以咱们 Android 开发来举个例子吧. 我们以前开发都是用 Ecl ...
- CAD计算两曲线间最短路径（com接口）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- CAD取Excel表格（com接口）
1 2 3 4 5 6 7 8 9 10 11 12 MxDrawResbuf ret = (MxDrawResbuf)axMxDrawX1.Call("ExApp_GetExcel&quo ...
- CAD增加一个有形的线型（网页版）
主要用到函数说明: _DMxDrawX::AddTextStyle1 向数据库中增加一个文字样式.详细说明如下: 参数 说明 BSTR pszName 文字样式名称 BSTR pszFileName ...
- CSS超链接常见四种状态在控制
一.首选设置一下以下4种状态常: 1.a:active是超级链接的初始状态 2.a:hover是把鼠标放上去时的状况 3.a:link 是鼠标点击时 4.a:visited是访问过后的情况.