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样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
随机推荐
- Codeforces 769C
很久没有发题解,今天这题卡了下百度没看到相关题解,最后还是看了官方题解才找到原本思路的bug过的. 题意:给出一个二维迷宫,*表示墙,. 表示路,X表示起点,问一个长度为k的路径,从X出发并且回到X, ...
- ansible剧本
yaml简介 YAML是"YAML Ain't a Markup Language"(YAML不是一种置标语言)的递归缩写,早先YAML的意思其实是:"Yet Anoth ...
- Hive扩展功能(三)--使用UDF函数将Hive中的数据插入MySQL中
软件环境: linux系统: CentOS6.7 Hadoop版本: 2.6.5 zookeeper版本: 3.4.8 主机配置: 一共m1, m2, m3这五部机, 每部主机的用户名都为centos ...
- GridView动态计算高度
// 动态加载GridView 高度 public static void setListViewHeightBasedOnChildren(MyGridView myGridView) { List ...
- mysql常用命令介绍
mysql适用于在Internet上存取数据,支持多种平台 1.主键:唯一标识表中每行的这个列,没有主键更新或删除表中的特定行很困难. 2.连接mysql可以用Navicat 要读取数据库中的内容先要 ...
- 白盒-CNN纹理深度可视化: 使用MIT Place 场景预训练模型
MIT发文:深度视觉的量化表示................ Places2 是一个场景图像数据集,包含 1千万张 图片,400多个不同类型的场景环境,可用于以场景和环境为应用内容的视觉认知任务. ...
- 170925_1 Python socket 创建TCP的服务器端和客户端
[Python版本]3.6 [遇到的问题] 客户端和服务器端都遇到:TypeError: a bytes-like object is required, not 'str' [解决方案] 参考:ht ...
- Spring学习笔记_day01_ioc
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! Spring_day01 spring是一站式的框架, ...
- HDU_2212_水
DFS Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...
- centos7安装个人网盘owncloud
现在个人资料越来越重要,网络速度也已经满足日常需要,网盘已经是生活着存取个人数据不可缺少的工具. 下面在linxu centos7下面安装owncloud搭建自己私人网盘: 1.新建一个账号用来安装个 ...