本文介绍了一种使用CSS实现响应式导航栏的方法，通过:hover伪类激活下拉菜单，利用transition实现平滑过渡效果。文章详细展示了如何定义导航栏的样式，包括高度、背景颜色等属性，并通过特定选择器实现了下拉菜单的隐藏与显示。
* {
margin:0;
padding:0;
}
li {
list-style:none;
}
.nav1 {
width:1200px;
height:60px;
background:#69bded;
margin:0 auto;
}
#nav .nav1 ul li {
width:200px;
line-height:60px;
text-align:center;
background:#69bded;
float:left;
}
#nav .nav1 ul li a {
color:#000;
display:block;
width:200px;
height:60px;
text-decoration:none;
}
#nav .nav1 ul li a:hover {
background:#f5a6ac;
color:#fff;
transition:all 0.7s;
}
.nav2 .li {
position:relative;
}
.nav3 {
position:obsolute;
height:0px;
overflow:hidden;
transition:height 0.7s;
-moz-transition:height 0.7s;
/* Firefox 4 */ -webkit-transition:height 0.7s;
/* Safari and Chrome */
}
/*就是当鼠标悬浮在li 上面的时候，让他子元素中的 nav3 显示可见*/
.nav2 .li:hover .nav3 {
height:180px;
}
.nav2 .li:nth-child(3):hover .nav3 {
height:240px;
}
#nav {
height:60px;
background:#3d313f;
position:fixed;
z-index:100000;
/* 必须设置最高层 */top:0px;
width:100%;
}
#header {
height:460px;
}
#content {
width:1200px;
height:1300px;
margin:0 auto;
}
#footer {
height:200px;
background:#1D1D1D;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
