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 ...
随机推荐
- css垂直居中方法盘点
1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...
- fiddler ios 手机抓包
前言: 环境 :手机ios ip5s .fiddler .360wifi 保证手机和电脑是局域网(同一网络) 1:下载安装fiddler 准备环境 2:配置 fiddler 对应把图勾选上 弹出框 点 ...
- 三妹，我拆了你的本-- Day One（大图赏）
从垃圾箱中捡到了三妹的笔记本,虽然显卡已烧,硬盘和内存已被掳走,但依旧很高兴的说,因为我的目的是要拆了它. 这是我的第一次,所以本文的内容完全是新手猎奇,高手勿喷~ 步骤1:拆掉塑料外壳 不要忘了硬盘 ...
- 344. Reverse String
https://leetcode.com/problems/reverse-string/ Python语法糖爆炸时间 class Solution(object): def reverseStrin ...
- strsep和strtok_r替代strtok
char *strtok(char *str, const char *delim) 会修改数据源.外部加锁才线程安全(strtok执行结束再解锁执行另一个strtok循环知道工作完成) 主要是以互斥 ...
- java类加载器加载文件
例子:采用配置文件加反射的方式创建ArrayList和HashSet的实例对象. //第一种方式:类加载器加载文件 InputStream ips = ReflectTest2.class.getCl ...
- maven学习（中）- 私服nexus搭建
接上回继续,相信大家对maven每次都联网从国外站点下载依赖项的龟速网络已经不坎忍受了,今天先来看看如何搭建"仓库私服",目前nexus是使用比较广泛的私服软件之一,下面将介绍基本 ...
- Eclipse下载与安装
有很多小伙伴不知道eclipse在哪里下载以及怎么安装的,那我来给大家做个演示吧. 学习java比较常用的软件就是eclipse,而eclipse安装后并不能马上使用,还需要安装jdk并搭建环境.下面 ...
- iOS UIAlertController跟AlertView用法一样 && otherButtonTitles:(nullable NSString *)otherButtonTitles, ... 写法
今天写弹出框UIAlertController,用alertView习惯了,所以封装了一下,跟alertView用法一样,不说了,直接上代码: 先来了解一下otherButtonTitles:(nul ...
- [转]C/C++ 程序员必须收藏的资源大全
from: https://github.com/jobbole/awesome-cpp-cn C++ 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome – XXX 系列 ...