Html5+Css3制作下拉菜单的三种方式 |
您所在的位置：网站首页 › html5菜单栏怎么做 › Html5+Css3制作下拉菜单的三种方式 |
|
一、渐变式改变ol的高度 1.外部为ul标签，在每个li里嵌套一个ol列表2.设置外部li左浮动，内部ol标签绝对定位，外部li标签相对定位3.设置ol的高为0，溢出隐藏4.外部li标签:hover 时，设置ol的高度，transition渐变 1 DOCTYPE html> 2 3 4 5 6 7 /*一、下拉菜单ol折叠*/ 8 *{margin: 0;padding: 0px} 9 ul{ 10 width: 200px; 11 height: 50px; 12 outline: 1px solid black; 13 } 14 ul li{ 15 width: 50%; 16 height: 100%; 17 outline: 1px solid black; 18 text-align: center; 19 float: left; 20 line-height: 50px; 21 list-style: none; 22 background: green; 23 } 24 ul ol{ 25 width: 100%; 26 height: 0; 27 transition: all linear 0.5s; 28 overflow: hidden; 29 outline: 1px solid black; 30 } 31 ul ol li{ 32 width: 100%; 33 height: 50px; 34 text-align: left; 35 background: pink; 36 outline: 1px solid black; 37 } 38 ul ol li a{ 39 color: black; 40 text-decoration: none; 41 } 42 ul li:hover ol{ 43 height: 150px; 44 transition: all linear 1s; 45 } 46 ul ol li:hover{ 47 background: yellow; 48 } 49 50 51 52 53 54 帅哥 55 56 罗晋 57 刘志鹏 58 周乐 59 60 61 美女 62 63 刘涛 64 范冰冰 65 刘诗诗 66 67 68 69 70
二、渐变式改变ol 下li标签的高度，同第一种方法，设置li标签的高度为0，hover的时候设置一个高度 1 DOCTYPE html> 2 3 4 5 6 7 /*二、下拉菜单li折叠*/ 8 *{margin: 0;padding: 0px} 9 ul{ 10 width: 200px; 11 height: 50px; 12 outline: 1px solid black; 13 } 14 ul li{ 15 width: 50%; 16 height: 100%; 17 outline: 1px solid black; 18 text-align: center; 19 float: left; 20 line-height: 50px; 21 list-style: none; 22 background: green; 23 } 24 ul ol li{ 25 width: 100%; 26 /*变化*/ 27 height: 0; 28 text-align: left; 29 background: pink; 30 outline: 1px solid black; 31 transition: all linear 1s; 32 overflow:hidden; 33 } 34 ul ol li a{ 35 color: black; 36 text-decoration: none; 37 } 38 ul li:hover ol li{ 39 height: 50px; /*变化*/ 40 transition: all linear 1s; 41 } 42 ul ol li:hover{ 43 background: yellow; 44 } 45 46 47 48 49 帅哥 50 51 罗晋 52 刘志鹏 53 周乐 54 55 56 美女 57 58 刘涛 59 范冰冰 60 刘诗诗 61 62 63 64 65
三、挂面式下拉菜单 用display隐藏，设置block显示二级菜单 1 DOCTYPE html> 2 3 4 5 6 7 /*三、挂面式二级菜单*/ 8 *{margin: 0;padding: 0px} 9 ul{ 10 width: 200px; 11 height: 50px; 12 outline: 1px solid black; 13 } 14 ul li{ 15 width: 50%; 16 height: 100%; 17 outline: 1px solid black; 18 text-align: center; 19 float: left; 20 line-height: 50px; 21 list-style: none; 22 background: green; 23 } 24 ul ol{ 25 width: 100%; 26 height: 150px; 27 overflow: hidden; 28 outline: 1px solid black; 29 display: none; 30 } 31 ul ol li{ 32 width: 100%; 33 height: 50px; 34 text-align: left; 35 background: pink; 36 outline: 1px solid black; 37 } 38 ul ol li a{ 39 color: black; 40 text-decoration: none; 41 } 42 ul li:hover ol{ 43 display: block; 44 } 45 ul ol li:hover{ 46 background: yellow; 47 } 48 49 50 51 52 53 54 帅哥 55 56 罗晋 57 刘志鹏 58 周乐 59 60 61 美女 62 63 刘涛 64 范冰冰 65 刘诗诗 66 67 68 69 70
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |