请问哪里有问题?为什么效果是那样,而且没有三级项目?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div{margin: 0;padding: 0;}
.page{background:url("http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png");
width:100%;
height:1000px;
position: relative;}
.nav{
top:50%;
height: auto;
width: 160px;
line-height: 40px;
background-color: #000;
color:#fff;
font-family: "微软雅黑";
position: fixed;
margin-top:;}
.tit{text-align: center;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #fff;}
.nav-1 {border-bottom: 1px solid #fff;
height: auto;
width: 160px;
text-align: center;
}
.nav-1 ul{width: 160px;
height:auto;
list-style: none;
}
.nav-1 ul li{
border-bottom: 1px dashed #666;
color:#333;
width:160px;
height:40px;
background: #fff;
display: none;
position: relative;}
.nav .nav-1:hover ul li{display: block;}
.list{height: auto;
position:absolute;
left:160px;
top:0;
width:160px;
display: none;}
.list .list-3{border-bottom: 1px solid #666;
background:#000;
color: #fff;
height: auto;
position: absolute;}
.nav-1 ul li:hover .list{display: block;}
</style>
<body>
<div class="page">
<div class="nav">
<div class="tit">导航题目</div>
<div class="nav-1">导航项
<ul>
<li>二级项目
<div class="list">
<div class="list-3">三级项目</div>
<div class="list-3">三级项目</div>
<div class="list-3">三级项目</div>
</div>
</li>
<li>二级项目</li>
<li>二级项目</li>
</ul>
</div>
<div class="nav-1">导航项</div>
<div class="nav-1">导航项</div>
<div class="nav-1">导航项</div>
<div class="nav-1">导航项</div>
<div class="nav-1">导航项</div>
<div class="nav-1">导航项</div>
</div>
</div>
</div>
</body>
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星