本文提供两个二级和三级导航菜单的制作练习，关注在HTML和CSS中实现导航条的关键技巧和常见问题，代码示例详尽解析。
（逆战班）
在这里分享两个练习的二级和三级的导航条的制作，代码后面会附上。
重点要说明下需要注意的一些问题点：
1.需要注意二级以及三级导航的滑动之后display:block；的显示要设置给li，勿设置给a
2.设置样式尽量通过子选择器进行设置，否则样式上会发生问题
3.定位的设置，要看实现的效果，子元素要设置为自动适应父元素的宽度，在谁下面那么他的上一级就要给relative定位属性，给当前的给予absolute绝对定位定格在自己想显示的地方。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二级导航练习</title>
<style>
*{ margin: 0; padding: 0;}
li{ list-style: none;}
a{ text-decoration: none;}
body{
font-size: 14px;
font-family: "微软雅黑";
}
/* 样式布局 */
.one{
position: relative;
width: 404px;
height: 40px;
margin: 30px auto 0;
background: #222222;
}
.one > li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
border-right: 1px solid #fff;
}
.one li a{
display: block;
color: #fff;
}
.one > li > a:hover{
background: #ffa500;
}
.two{
position: absolute;
display: none;
width: 100%;
left: 0;
top: 40px;
}
.two > li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background: #ffa500;
}
.one > li:hover > ul{
display: block;
}
.one > li:hover > a{
background: #ffa500;
}
</style>
</head>
<body>
<ul class="one">
<li>
<a href="">一级导航1</a>
<ul class="two">
<li>
<a href="">二级导航1</a>
</li>
<li>
<a href="">二级导航2</a>
</li>
<li>
<a href="">二级导航3</a>
</li>
<li>
<a href="">二级导航4</a>
</li>
</ul>
</li>
<li>
<a href="">一级导航2</a>
<ul class="two">
<li>
<a href="">二级导航5</a>
</li>
<li>
<a href="">二级导航6</a>
</li>
<li>
<a href="">二级导航7</a>
</li>
<li>
<a href="">二级导航8</a>
</li>
</ul>
</li>
<li>
<a href="">一级导航3</a>
<ul class="two">
<li>
<a href="">二级导航9</a>
</li>
<li>
<a href="">二级导航10</a>
</li>
<li>
<a href="">二级导航11</a>
</li>
<li>
<a href="">二级导航12</a>
</li>
</ul>
</li>
<li>
<a href="">一级导航4</a>
<ul class="two">
<li>
<a href="">二级导航13</a>
</li>
<li>
<a href="">二级导航14</a>
</li>
<li>
<a href="">二级导航15</a>
</li>
<li>
<a href="">二级导航16</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三级导航练习</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
a{ text-decoration: none;}
li{ list-style: none;}
body{ font-size: 14px; font-family: "微软雅黑";}
/* 样式布局 */
.one{
width: 500px;
height: 40px;
margin: 30px auto 0;
background: #ff3939;
opacity: .8;
}
.one > li{
float: left;
width: 99px;
height: 40px;
border-right: 1px solid #fff;
text-align: center;
line-height: 40px;
position: relative;
}
.one li a{
display: block;
color: #fff;
}
.two{
display: none;
position: absolute;
width: 100%;
}
.two > li{
width: 99px;
height: 40px;
text-align: center;
line-height: 40px;
background: #fce45d;
border-bottom: 1px solid #fff;
position: relative;
}
.two > li > a{
color: #333;
}
.three{
display: none;
position: absolute;
width: 100%;
left: 100px;
top: 0;
}
.three > li{
width: 99px;
height: 40px;
text-align: center;
line-height: 40px;
background: #6c6cfb;
border-bottom: 1px solid #fff;
}
.one > li:hover > ul{
display: block;
}
.two > li:hover > ul{
display: block;
}
</style>
</head>
<body>
<ul class="one">
<li>
<a href="">一级导航1</a>
<ul class="two">
<li>
<a href="">二级导航1</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航2</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航3</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">一级导航2</a>
<ul class="two">
<li>
<a href="">二级导航1</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航2</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航3</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">一级导航3</a>
<ul class="two">
<li>
<a href="">二级导航1</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航2</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航3</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">一级导航4</a>
<ul class="two">
<li>
<a href="">二级导航1</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航2</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航3</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="">一级导航5</a>
<ul class="two">
<li>
<a href="">二级导航1</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航2</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
<li>
<a href="">二级导航3</a>
<ul class="three">
<li>
<a href="">三级导航1</a>
</li>
<li>
<a href="">三级导航2</a>
</li>
<li>
<a href="">三级导航3</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
结束语-------------------分享知识从我做起，大家一起高飞猛进！
扫一扫
2222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
