二级下拉菜单缓慢渐变

transition属性与display属性相冲突，不能使用这两种属性达到渐变效果。
transition属性与height属性结合，
初始时二级菜单高度为0，通过溢出隐藏，使整个二级菜单在一开始就整个隐藏，
当鼠标悬停在一级菜单某项上时，通过高度的渐变，溢出部分逐渐减少，让二级菜单随着高度变化而显示出来，达到二级下拉菜单缓慢渐变的效果。

<!DOCTYPE html><html lang="en" >
<head><meta charset="utf-8" /><title>HTML实验1</title><style>*{margin:0px;padding:0px;}header{background:#b6ff00;width:100%;height:100px;margin-bottom:10px;position:relative;}nav{position:absolute;/*相对于上面的用relative的元素*/bottom:5px;left:600px;cursor:pointer;}ul{list-style:none;}ul li {float: left;/*一级菜单向左浮动，使之水平排列*/background:#b200ff;text-decoration:none;color:#ffffff;font-weight:bold;display:block;line-height:40px;padding:0px 10px;}ul li a:hover{background:#0094ff;}ul li ul {position: absolute;/*绝对定位，相对于上面的用relative的元素*/height:0;overflow:hidden;/*溢出时隐藏,初始时高为0，所以整个二级菜单都被隐藏。*/background: #b200ff;color: #ffffff;}ul li:hover ul{height:160px;transition:all 2s;/*transition属性与display属性冲突，transition属性与height属性结合，通过溢出隐藏，让二级菜单随着高度变化而显示出来，达到二级下拉菜单缓慢渐变的效果。*/}#section{background:#ff6a00;width:100%;height:800px;}</style>
</head>
<body><header><nav><ul><li>视频<ul><li><a href="https://www.bilibili.com/"target="_blank">bilibili</a></li><li><a href="https://v.qq.com/" target="_blank">腾讯视频</a></li><li><a href="https://www.iqiyi.com/"target="_blank">爱奇艺</a></li><li><a href="https://www.youku.com/">优酷</a></li></ul></li><li>问答<ul><li><a href="https://www.zhihu.com/signin?next=%2F"target="_blank">知乎</a></li><li><a href="https://www.csdn.net/">CSDN</a></li></ul></li></ul></nav></header><!--网页头部里嵌套一个导航栏，由ul列表组成，利用ul嵌套构成一个二级的下拉菜单，当鼠标移动到相应的一级菜单项，将会展开对应的二级菜单，利用transition属性使二级菜单缓缓展开，--><section id="section"></section>
</body>
</html>

二级下拉菜单缓慢渐变相关推荐

CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/deta ...
纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
绑定dictionary 给定关键字不再字典中_VBA数组与字典解决方案第51讲：字典嵌套及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
绑定dictionary 给定关键字不再字典中_对字典嵌套的理解及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下代码如下: 下拉菜单 nav a{ text-de ...
android二级菜单实现,Android编程实现二级下拉菜单及快速搜索的方法
本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法.分享给大家供大家参考,具体如下: 一.我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单. 输入查询内容,下面列表将显示查询结果. ...
vba下拉框实现记忆功能_VBA | 这个二级下拉菜单挺有趣！
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 前面章节我们讲过了表单控件和ActiveX控件的区别,知道了A ...
jQuery和CSS3超酷二级下拉菜单插件
这是一款效果很酷又简单实用的 jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是 ...

二级下拉菜单缓慢渐变

二级下拉菜单缓慢渐变相关推荐

最新文章

热门文章