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 ...
随机推荐
- DevExpress 程序运行后 layoutView 卡片大小发生变化
设置属性前效果: 将layoutView1.CardMinSize 的属性更改为(0, 0) 后 效果:
- cmd连接mysql的方法详解(转载)
连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样)断开:exit (回车) 创建授权:grant select on 数据库.* to 用户名@登 ...
- maven集成tomcat插件以及乱码解决
Maven已经是Java的项目管理标配,如何在JavaEE开发使用Maven调用Web应用,是很多同学关心的问题.本文将介绍,Maven如何介绍Tomcat插件. Maven Tomcat插件现在主要 ...
- nagios检测http
/usr/local/nagios/etc/server/下相应的地址检测加上以下一段 (server下的cfg文件是检测相应服务器的模块) define service{ use ...
- git tag使用标记
git跟其它版本控制系统一样,可以打标签(tag), 作用是标记一个点为一个版本号,如0.1.3, v0.1.7, ver_0.1.3.在程序开发到一个阶段后,我们需要打个标签,发布一个版本,标记的作 ...
- vue2.0 组件之间的数据传递
组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog= ...
- 【转】Caffe初试（九）solver及其设置
solver算是caffe的核心的核心,它协调着整个模型的运作.caffe程序运行必带的一个参数就是solver配置文件.运行代码一般为 #caffe train --solver=*_solver. ...
- MYsql 数据库密码忘记（Linux）
在Linux 上面装上了 Mysql 数据库,但是发现密码忘了,悲催,解决方法跟Window系统下一样的, 不管是哪个操作系统处理的思路是相同的,就是首先要把mysql的权限去掉,这样即使忘了密码,不 ...
- 判断是否为gif/png图片的正确姿势
判断是否为gif/png图片的正确姿势 1.在能取到图片后缀的前提下 1 2 3 4 5 6 7 8 9 //假设这是一个网络获取的URL NSString *path = @"http:/ ...
- PHP扩展安装mcrypt 提示没有可用包（No package php-mcrypt available）
一.用CentOS的朋友基本在安装软件的时候默认都会想到用yum安装省事省时而且不会有错不需要担心依赖问题. php大部分的扩展都是可以再yum源里安装的,但是部分扩展是没有的,需要安装epel-re ...