一、三级菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>lesson12</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {}
.nav>li {
float: left;
width: 120px;
height: 50px;
background: #333333;
color: #fff;
text-align: center;
line-height: 50px;
margin-right: 5px;
}
.second>li {
width: 120px;
height: 50px;
background: #999999;
color: #fff;
text-align: center;
line-height: 50px;
margin-bottom: 1px;
}
.third>li {
width: 120px;
height: 50px;
background: lightblue;
color: #666666;
text-align: center;
line-height: 50px;
margin-bottom: 1px;
}
.second {
display: none;
}
.second li {
position: relative;
}
.nav li:hover .second {
display: block;
}
.nav li:hover {
background: pink;
}
.third {
position: absolute;
left: 120px;
top: 0;
display: none;
}
.second>li:hover .third {
display: block;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li>
<a>首页</a>
<ul class="second">
<li>
<a>首页二级菜单1</a>
<ul class="third">
<li>首页三级菜单1</li>
<li>首页三级菜单2</li>
<li>首页三级菜单3</li>
</ul>
</li>
<li>
<a>首页二级菜单2</a>
<ul class="third">
<li>首页三级菜单1</li>
<li>首页三级菜单2</li>
<li>首页三级菜单3</li>
</ul>
</li>
<li>
<a>首页二级菜单3</a>
<ul class="third">
<li>首页三级菜单1</li>
<li>首页三级菜单2</li>
<li>首页三级菜单3</li>
</ul>
</li>
</ul>
</li>
<li>
<a>产品</a>
</li>
<li>
<a>咨询</a>
</li>
</ul>
</div>
</body>
</html>
二、用浏览器调试程序
五大浏览器:IE、CHROME,FIREFOX,OPERA,SAFARI.调试用谷歌和火狐。快捷键F12
相关资料链接:chrome调试工具使用之css篇
三、细节解析
1、制作网页要注意显示屏的分辨率和显示比例(默认100%)
2、自己写网页要注意格式层级,如果乱了,右键重排代码格式。
3、一个网页会有多个CSS文件,根据功能版面划分为多个文件,如专门清楚格式的CSS文件。这样方便日后维护。
</style>
<link rel="stylesheet" href=" "/>
<link rel="stylesheet" href=" "/>
<link rel="stylesheet" href=" "/>
</head>
4、文字和标签不能同级
错误如下:
<li>首页
<ul class="second">
5、写代码出现错误,:hover前多了空格和鼠标滑过的子父级没区分对。