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 ...
随机推荐
- Sublime Text 3 常用插件以及安装方法(转)
http://www.cnsecer.com/460.html 安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧, ...
- Debian-based Linux distributions 安装 virtualbox
Add the following line to your /etc/apt/sources.list: deb http://download.virtualbox.org/virtualbox/ ...
- （二）Netty源码学习笔记之服务端启动
尊重原创,转载注明出处,原文地址:http://www.cnblogs.com/cishengchongyan/p/6129971.html 本文将不会对netty中每个点分类讲解,而是一个服务端启 ...
- 第18讲——ActiveX控件
1,容器应用程序是可以嵌入或链接对象的应用程序.服务器应用程序是创建对象并且当对象被双击时,可以被启动的应用程序. 2,可以安装一个TstCon32来测试ActiveX控件 3,可以用 Invalid ...
- angular $http 与form表单的select-->refine
<!DOCTYPE html> <html ng-app="a2_15"> <head> <meta http-equiv="C ...
- ->code vs 2879 堆的判断（堆的学习一）
2879 堆的判断 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题目描述 Description 堆是一种常用的数据结构.二叉堆是一个特殊的二叉树,他的父 ...
- 让一个图片在div中居中（四种方法）
第一种方法: <div class="title"> <div class="flag"></div> <div cl ...
- mysql主从
1 系统规划 1.1 mysql版本 Mysql版本 mysql-5.5.51 1.2 服务器地址 服务器地址 10.180.2.167 1.3 mysql目录 主 ...
- 深入理解 spring 容器，源码分析加载过程
Spring框架提供了构建Web应用程序的全功能MVC模块,叫Spring MVC,通过Spring Core+Spring MVC即可搭建一套稳定的Java Web项目.本文通过Spring MVC ...
- JS多线程（web work）
JS多线程JS多线程不允许操作DOM 1. 引用Concurrent Thread.js库用法:Concurrent.Thread.Create(function(){};) 2. Web Workh ...