Html5+Css3制作下拉菜单的三种方式
一、渐变式改变ol的高度
1.外部为ul标签，在每个li里嵌套一个ol列表
2.设置外部li左浮动，内部ol标签绝对定位，外部li标签相对定位
3.设置ol的高为0，溢出隐藏
4.外部li标签:hover 时，设置ol的高度，transition渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*一、下拉菜单ol折叠*/
*{margin: 0;padding: 0px}
ul{
width: 200px;
height: 50px;
outline: 1px solid black;
}
ul li{
width: 50%;
height: 100%;
outline: 1px solid black;
text-align: center;
float: left;
line-height: 50px;
list-style: none;
background: green;
}
ul ol{
width: 100%;
height: 0;
transition: all linear 0.5s;
overflow: hidden;
outline: 1px solid black;
}
ul ol li{
width: 100%;
height: 50px;
text-align: left;
background: pink;
outline: 1px solid black;
}
ul ol li a{
color: black;
text-decoration: none;
}
ul li:hover ol{
height: 150px;
transition: all linear 1s;
}
ul ol li:hover{
background: yellow;
} </style>
</head>
<body>
<ul>
<li>帅哥
<ol>
<li><a href="#">罗晋</a></li>
<li><a href="#">刘志鹏</a></li>
<li><a href="#">周乐</a></li>
</ol>
</li>
<li>美女
<ol>
<li><a href="#">刘涛</a></li>
<li><a href="#">范冰冰</a></li>
<li><a href="#">刘诗诗</a></li>
</ol>
</li>
</ul>
</body>
</html>
二、渐变式改变ol 下li标签的高度，同第一种方法，设置li标签的高度为0，hover的时候设置一个高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*二、下拉菜单li折叠*/
*{margin: 0;padding: 0px}
ul{
width: 200px;
height: 50px;
outline: 1px solid black;
}
ul li{
width: 50%;
height: 100%;
outline: 1px solid black;
text-align: center;
float: left;
line-height: 50px;
list-style: none;
background: green;
}
ul ol li{
width: 100%;
/*变化*/
height: 0;
text-align: left;
background: pink;
outline: 1px solid black;
transition: all linear 1s;
overflow:hidden;
}
ul ol li a{
color: black;
text-decoration: none;
}
ul li:hover ol li{
height: 50px; /*变化*/
transition: all linear 1s;
}
ul ol li:hover{
background: yellow;
}
</style>
</head>
<body>
<ul>
<li>帅哥
<ol>
<li><a href="#">罗晋</a></li>
<li><a href="#">刘志鹏</a></li>
<li><a href="#">周乐</a></li>
</ol>
</li>
<li>美女
<ol>
<li><a href="#">刘涛</a></li>
<li><a href="#">范冰冰</a></li>
<li><a href="#">刘诗诗</a></li>
</ol>
</li>
</ul>
</body>
</html>
三、挂面式下拉菜单 用display隐藏，设置block显示二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*三、挂面式二级菜单*/
*{margin: 0;padding: 0px}
ul{
width: 200px;
height: 50px;
outline: 1px solid black;
}
ul li{
width: 50%;
height: 100%;
outline: 1px solid black;
text-align: center;
float: left;
line-height: 50px;
list-style: none;
background: green;
}
ul ol{
width: 100%;
height: 150px;
overflow: hidden;
outline: 1px solid black;
display: none;
}
ul ol li{
width: 100%;
height: 50px;
text-align: left;
background: pink;
outline: 1px solid black;
}
ul ol li a{
color: black;
text-decoration: none;
}
ul li:hover ol{
display: block;
}
ul ol li:hover{
background: yellow;
} </style>
</head>
<body>
<ul>
<li>帅哥
<ol>
<li><a href="#">罗晋</a></li>
<li><a href="#">刘志鹏</a></li>
<li><a href="#">周乐</a></li>
</ol>
</li>
<li>美女
<ol>
<li><a href="#">刘涛</a></li>
<li><a href="#">范冰冰</a></li>
<li><a href="#">刘诗诗</a></li>
</ol>
</li>
</ul>
</body>
</html>
Html5+Css3制作下拉菜单的三种方式的更多相关文章
- CSS3制作下拉菜单
导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...
- 用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...
- HTML5/CSS3动画下拉菜单
在线演示 本地下载
- 纯css3圆角下拉菜单 都没敢用js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery+Superfish制作下拉菜单
superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...
- 制作下拉菜单(PopupList)
怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷 ...
- Excel设置数据有效性实现单元格下拉菜单的3种方法(转）
http://blog.csdn.net/cdefu/article/details/4129136 一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的“数据”→“有效性”→出 ...
- html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
- html5 css练习 下拉菜单制作
*{ margin: 0; padding: 0;}li{ list-style-type: none;}a{ text-decoration: none;}.ul1{marg ...
随机推荐
- Mac 安装配置rz、sz
在Iterm2中修改配置: 安装lrzsz brew install lrzsz 下载iterm2-zmodem cd /usr/local/bin sudo wget https://raw.git ...
- Android SDK Manager无法更新的解决[ 转]
将下列内容行添加到hosts文件中: 74.125.237.1 dl-ssl.google.com 1.Windows C:\WINDOWS\system32\drivers\etc\Hosts 2. ...
- 配置VMware虚拟机用绕过校园网达到无线上网配置方法
因为平时要用到Vmware这样的工具上虚拟机上网, 但是本人是学生狗,学生狗在学校就要面对大学毒瘤软件--锐捷,而锐捷是不允许有虚拟网卡的存在的,所以上网只能用wifi上.之前试了很久,反正是怎么开都 ...
- Devils never rest
一个人 练习一个人 书名 看到就被吸引了,然后亚马逊下手 作者很文艺,我很喜欢作者内心的那份宁静. 我一个人吃饭 旅行 到处走走停停 也一个人看书 写信 自己对话谈心 依然是心内一片寂静,总是不由自主 ...
- sha1散列(C语言)
/** * \file sha1.h * * \brief SHA-1 cryptographic hash function * * Copyright (C) 2006-2010, Brainsp ...
- sql 如何将拼的sql语句结果赋值给变量
SET @SQLS='select @AllUser=count(1) from (select PhoneId from '+@TABLE+' where SiteId='+convert(VARC ...
- c语言学习笔记三
第三章,函数 字符串函数 //strcmp int my_strcmp(char *str1,char *str2) { while(*str1 = = *str2) /*不可用while(* ...
- ubuntu下设置数据库字符集
就linux环境下出现的数据库乱码的问题,以ubuntu为例进行的总结 ubuntu环境设置的字符集utf8,windows默认字符集是GBK,Ubuntu的默认字符集为utf-8,这使 得在用tel ...
- 【Java EE 学习 70 下】【数据采集系统第二天】【Action中User注入】【设计调查页面】【Action中模型赋值问题】【编辑调查】
一.Action中User注入问题 Action中可能会经常用到已经登陆的User对象,如果每次都从Session中拿会显得非常繁琐.可以想一种方法,当Action想要获取User对象的时候直接使用, ...
- HP-SOCKET TCP/UDP通信框架库解析
项目概述: HP-SOCKET是一套通用TCP/UDP通信框架,包括服务器.客户端.Agent组件:其目标是提供高性能.通用性.简易性.可扩展.可定制: 鉴于此,其仅实现基本的通用框架通信.数据收发功 ...