（自学收获）纯css网页小部件--下拉菜单

来源：互联网发布：北京软件行业协会电话编辑：程序博客网时间：2024/05/29 16:27

虔诚地拜读了http://www.cnblogs.com/yewenxiang/p/6064117.html这位博主的内容，然后仿照他的写了这篇博客（ps：我是年龄老的未成年人，转载不算犯法）

对于导航的下拉菜单他有五种实现方法，前三种没有一个下拉条缓慢出现的过程（好吧他只有一个有那种效果）。

html的结构不同变（嵌套的两个无序列表），只需修改css的部分代码即可用不同方法来实现，但同时对下面的流内元素的影响不同。详情自己手动实验或者看↑那个人的博客（没打广告，看疗效）（pss：果然自己学的不扎实，村里人见了.nav li:hover .subnav{}这种中间子元素带着伪类的让我感到新鲜而又赤鸡很好用）

补充：自己有试着加了一个三级的导航，原理和之前的一样。所以同样可以加加加加加到一百层导航如果你愿意，可以靠position来定位你三级导航的位置。（其他的如用margin也能实现，反正都是调整位置嘛不过那个就是在流里）

二级导航效果图：

第一种：思路：靠display：none和悬停时候的display：block，来实现下拉菜单的隐藏和出现（第一个主体列表一定要用float流出来，在流内的话显示下来菜单会把主体部分顶上去不信自己试）

总体 html：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>下拉菜单3</title><link rel="stylesheet" href="sublist-5.css"></head><body><ul class="nav"><li><a href="#">菜单一</a><ul class="subnav"><li>内容一</li><li>内容二</li><li>内容三</li></ul></li><li><a href="#">菜单二</a><ul class="subnav"><li>内容一</li><li>内容二</li><li>内容三</li></ul></li><li><a href="#">菜单三</a><ul class="subnav"><li>内容一</li><li>内容二</li><li>内容三</li></ul></li><li><a href="#">菜单四</a><ul class="subnav"><li>内容一</li><li>内容二</li><li>内容三</li></ul></li></ul></body></html>

css：

* {padding: 0;margin: 0;}ul {list-style: none;}.nav {position: relative;left: 40%;top: 40px;width: 40%;height: 50px;}.nav > li {float: left;width: 20%;height: 50px;line-height: 50px;text-align: center;color: #00d;background-color: #aaa;}.nav >li:first-child {border-radius: 10px 0 0 10px;}.nav >li:last-child {border-radius: 0 10px 10px 0;}.nav li a {display: block;width: 100%;height: 50px;cursor: pointer;}.subnav {display: none;}.nav li:hover .subnav {display: block;}.subnav li {background-color: #888;transition: all 0.4s ease-in-out ;}.subnav li:hover {    color: #000;    background-color: #ddd;}

第二种：靠overflow：hidden和overflow：visible对导航的li的显示范围限定来实现

.nav > li {float: left;width: 20%;height: 50px;line-height: 50px;text-align: center;color: #00d;background-color: #aaa;overflow: hidden;}.nav >li:first-child {border-radius: 10px 0 0 10px;}.nav >li:last-child {border-radius: 0 10px 10px 0;}.nav li a {display: block;width: 100%;height: 50px;cursor: pointer;}.nav > li:hover {overflow: visible;}

第三种：通过透明度属性opacity：值0 和值1来实现

.subnav {opacity: 0;}.nav li:hover  .subnav{opacity: 1;

第四种：通过把下拉菜单的ul高度设为0（！一定要overflow：hidden来隐藏因为还有li呢）这种会有缓慢下落的效果美滋滋

.subnav {height: 0;overflow: hidden;transition: all .5s ease-in-out;}.nav li:hover .subnav {height: 150px;}.subnav li {height: 50px;background-color: #888;transition: all 0.4s ease-in-out ;}

第五种：通过绝对定位，把下拉列表“藏”起来移到别的位置，那个作者用的是向左移，因为他只做了一个，所以效果还好，如果你都有下拉，在定位的时候，需要给每个都设置一个left的值（

应该是这样错了别怪我因为我统一设的类没细究）所以我把定位定到了头顶上嘎嘎嘎

.subnav {position: absolute;top: -999px;width: 20%;}.nav li:hover  .subnav{top: 50px;}

啊嘞，是不是还有从侧面出现的下拉菜单，。。。。。又是充满遗憾的一篇博客。下回思考思考。每天练习一点，生活很滋润大兄弟。

0 0