HTML+CSS 实现网页二级导航栏
首先写HTML文件,写你想要制作的导航栏,例如:
在一级标签写嵌套二级标签即可,这样写好一个二级导航栏基本确定,只需要加样式就好啦
然后写css文件,设定样式
效果图如下:
首先写HTML文件,写你想要制作的导航栏,例如:
<html>
<head>
<title>二级导航栏</title>
</head>
<body>
<div class="sty">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">慢生活</a>
<ul>
<li><a href="#">旅行</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">阅读</a></li>
</ul>
</li>
<li><a href="#">web前端</a>
<ul>
<li><a href="#">html5</a></li>
<li><a href="#">css</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">网络营销</a></li>
<li><a href="#">新闻资讯</a></li>
</ul>
</div>
</body>
</html>
在一级标签写嵌套二级标签即可,这样写好一个二级导航栏基本确定,只需要加样式就好啦
然后写css文件,设定样式
*{
margin: 0;
padding: 0;
}
/*CSS全局设置*/
*{
margin:0;
padding:0;
}
.nav{
background-color:#4a4a4a;
height:40px;
width:450px;
margin:0 auto;
}
/*横向一级菜单样式设置*/
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
color:white;
display:block;/*将a行内元素转变成块级元素*/
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
/*二级下拉菜单样式设置*/
ul li ul{
position:absolute;
top:40px;
left:0px;
display:none;/*默认状态下或鼠标离开时隐藏*/
width:90px;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul li a:link,ul li ul li a:visited{
background-color:#4a4a4a;
}
ul li ul li a:hover{
background-color:#009933;
}
/*鼠标滑过一级菜单的元素时显示下拉菜单*/
ul li:hover ul{
display:block;
}
效果图如下: