横向二级导航栏
HTML代码
<div id="nav">
<ul>
<li><a href="#">学院首页</a></li>
<li><a href="#">招生就业</a>
<ul>
<li><a href="#">招生信息</a></li>
<li><a href="#">就业信息</a></li>
</ul>
</li>
<li><a href="#">人才招聘</a></li>
<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="#">学习园地</a></li>
<li><a href="#">科技服务</a></li>
<li><a href="#">图书资讯</a></li>
<li style="width: 96px"><a href="#">后勤保障</a></li>
</ul>
</div>
CSS代码
<style type="text/css">
/*简单的思路就是
1.先初始化所有元素
2.给div标签大小和背景色
3.给左右li标签大小,并float:left
4.隐藏二级列表
5.控制一级显示二级列表
6.设置一些背景色和hover变色
7.a标签取消下划线,列表取消样式
*/
#nav{
width: 800px;
height: 28px;
margin: 0 auto;
background-color: #ff3399;
}
#nav ul{
margin: 0px;
padding: 0px;
}
#nav ul li{
float: left;
width: 88px;
height: 28px;
line-height: 28px;
float: left;
list-style: none;
text-align: center;
}
#nav ul li:hover{
background-color:#666;
}
#nav a{
color: white;
text-decoration: none;
}
#nav ul li ul{
display: none;
}
#nav ul li ul li{
background-color: gray;
}
#nav ul li:hover ul{
display: block;
background-color: gray;
}
#nav ul li ul li:hover{
background: red;
}
</style>
横向三级导航栏 ps:需要用到position绝对定位
HTML代码
<div id="nav">
<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>
<ul>
<li><a href="#">风雨哈佛路</a></li>
<li><a href="#">肖申克的救赎</a></li>
<li><a href="#">阿甘正传</a></li>
<li><a href="#">当幸福来敲门</a></li>
</ul>
</li>
<li><a href="#">爱情</a></li>
<li><a href="#">惊悚</a></li>
</ul>
</li>
<li><a href="#">旅游</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">动漫</a></li>
<li><a href="#">我们</a></li>
</ul>
</div>
CSS代码
<style type="text/css">
/*思路:
1.先初始化所有元素
2.给div标签大小和背景色
3.给左右li标签大小,并float:left
4.隐藏二级列表三级列表
5.控制一级显示二级列表
6.控制一级隐藏三级列表
7.控制二级显示三级列表
8.二级列表position:ralative
9.三级列表position:absolute
10.设置一些背景色和hover变色
11.a标签取消下划线,列表取消样式
*/
*{
margin: 0;
padding: 0;
}
#nav{
width: 700px;
height: 28px;
background-color: orange;
margin: 0 auto;
}
#nav ul{
list-style: none;
display: inline;
}
#nav ul li{
width: 100px;
height: 28px;
text-align: center;
line-height:28px;
float: left;
position: relative;
}
#nav ul li ul{
display: none;
position: absolute;
top:28px;
left: 0px;
}
a{
color: white;
text-decoration: none;
}
#nav ul li:hover{
background-color: #BDB76B;
}
#nav ul li:hover ul{
display: block;
background-color: #BDB76B;
}
#nav ul li ul li:hover{
background-color: #FF69B4;
}
#nav ul li:hover ul li ul{
display: none;
}
#nav ul li ul li ul{
position: absolute;
top:0px;
left: 100px;
}
#nav ul li ul li{
position: relative;
}
#nav ul li ul li:hover ul{
background-color: #FF69B4;
display: block;
}
#nav ul li ul li ul li:hover{
background-color: #BA55D3;
}
</style>
纵向三级导航栏
HTML代码
<div id="nav">
<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>
<ul>
<li><a href="#">风雨哈佛路</a></li>
<li><a href="#">肖申克的救赎</a></li>
<li><a href="#">阿甘正传</a></li>
<li><a href="#">当幸福来敲门</a></li>
</ul>
</li>
<li><a href="#">爱情</a></li>
<li><a href="#">惊悚</a></li>
</ul>
</li>
<li><a href="#">旅游</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a>
<ul>
<li><a href="#">安静</a></li>
<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>
<li><a href="#">热狗</a></li>
</ul>
</li>
<li><a href="#">经典</a></li>
</ul>
</li>
<li><a href="#">动漫</a></li>
<li><a href="#">我们</a></li>
</ul>
</div>
CSS代码
<style type="text/css">
/*思路
1.初始化所有元素
2.给nav盒子宽度,不给高度,居中
3.给li标签添加背景颜色,line-height决定li的高度
4.二级列表position:relative
5.三级列表position:absolute,top:0px,left:(宽度)px;
6.隐藏二三级列表
7.一级hover显示二级列表
8.一级hover隐藏三级列表
9.二级hover显示三级列表
10.hover改变颜色
*/
*{
margin: 0;
padding: 0;
}
#nav{
text-align: center;
width: 100px;
margin: 0 auto;
}
a{
text-decoration: none;
}
li{
display: block;
list-style: none;
line-height: 30px;
}
#nav ul li ul li{
display: none;
position: relative;
}
#nav ul li:hover ul li{
display: block;
background-color:#E1FFFF;
}
#nav ul li:hover ul li ul li{
display: none;
}
#nav ul li ul li:hover ul li{
display: block;
background-color: #98FB98;
}
#nav ul li{
background-color: orange;
}
#nav ul li:hover{
background-color:#FFD700;
}
#nav ul li ul li:hover{
background-color: #D4F2E7;
}
#nav ul li ul li ul li:hover{
background-color: #3CB371;
}
#nav ul li ul li ul{
width: 100px;
height: 30px;
position: absolute;
left: 100px;
top:0px;
}
</style>