一、渐变式改变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制作下拉菜单的三种方式的更多相关文章

  1. CSS3制作下拉菜单

    导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...

  2. 用纯css实现下拉菜单的几种方式

    第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...

  3. HTML5/CSS3动画下拉菜单

    在线演示 本地下载

  4. 纯css3圆角下拉菜单 都没敢用js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  6. 制作下拉菜单(PopupList)

    怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷 ...

  7. Excel设置数据有效性实现单元格下拉菜单的3种方法(转）

    http://blog.csdn.net/cdefu/article/details/4129136 一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的“数据”→“有效性”→出 ...

  8. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  9. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

随机推荐

  1. linux 批量删除进程

    2016年11月18日 13:11:10 星期五 ps -ef | grep pname | awk '{print $2}' | xargs kill 解释: 杀掉所有包含 'pname' 的进程

  2. selenium测试框架篇，页面对象和元素对象的管理

    前期已经做好使用Jenkins做buildhttp://www.cnblogs.com/tobecrazy/p/4529399.html 做自动化框架,不可避免的就是对象库. 有一个好的对象库,可以让 ...

  3. nodejs 编写（添加时间戳）命令行工具 timestamp

    Nodejs除了编写服务器端程序还可以编写命令行工具,如gulp.js就是Nodejs编写的. 接下来我们来实现一个添加时间戳的命令: $ timestamp action https://www.n ...

  4. IntelliJ IDEA WEB项目的部署配置

    以下内容是我网上找的比较全面了,其中关于facets配置很多地方都没有说明,其实很重要,我加入了自己的理解.其他来自网络.在导入一个项目有问题时,建议先创建一个正确的web项目,然后对比配置项,一般就 ...

  5. 求一个区间[a,b]中数字1出现的次数

    问题来源:http://ac.jobdu.com/problem.php?pid=1373 举例:如果n=10 那么1-10之间的1的个数是2(1,2,3,4,...10) 这其中有一个规律: 挨着看 ...

  6. VC++ 设置软件开机自启动的方法

    0  概述 软件开机自启动是比较常用的做法,设置方法也有好几种. 1  使用者模式 在"开始菜单"的所有程序中有个"启动"文件夹,可以将需要设置为开机启动的应用 ...

  7. Redis安装及实现session共享

    一.Redis介绍 1.redis是key-value的存储系统,属于非关系型数据库 2.特点:支持数据持久化,可以让数据在内存中保存到磁盘里(memcached:数据存在内存里,如果服务重启,数据会 ...

  8. PHP 链接多种数据库 的方法

    数据库中  单词之间的空格(一个语句前面和后面做字符串拼接的时候最好留空格 )  可以随便加   其他地方  禁止随便加空格!!(加了 就报错)! =====================总结=== ...

  9. linux的安装

    在CentOS 7中提供了两种桌面"GNOME DESKTOP" 和 "KDE Plasa Workspaces",我们以安装"GNOME DESKT ...

  10. java 代码解压7z(带密码)转载请注明出处,谢谢

    <sevenzipjbinding.version>9.20-2.00beta</sevenzipjbinding.version> <dependency> &l ...