虔诚地拜读了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;
}
啊嘞,是不是还有从侧面出现的下拉菜单,。。。。。又是充满遗憾的一篇博客。下回思考思考。每天练习一点,生活很滋润大兄弟。