CSS的三级菜单

来源：互联网发布：matlab怎么用数据画图编辑：程序博客网时间：2024/06/05 13:34

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul li a{
padding: 0px;
margin: 0px;
}
ul{
height: 30px;
}
ul li{
list-style-type: none;
float: left;
width: 70px;
height: 30px;
background: #0062CC;
color: #FFFFFF;
text-align: center;
}
ul li a{
display: block;
text-decoration: none;
color: #FFFFFF;
height: 30px;
width: 70px;
line-height: 30px;
}
ul li ul{
display: none;
}
ul li a:hover{
background: #FFFFFF;
color: red;
}
ul li:hover ul{
display: block;
}
ul li ul li {
float: none;
position: relative;
left: -40px;
top: 0px;
}

ul li ul li ul{
display: none;

}
ul li:hover ul li .threemenu{
display: none;
}
.threemenu{

background: #0062CC;
position: relative;
left: 70px;
top: -30px;
}
.threemenu li{
background: #0062CC;
}
ul li ul li:hover .threemenu{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="">工具</a></li>
<li><a class="mymenu" href="">项目</a>
<ul>
<li><a href="">工作</a>
<ul class="threemenu">
<li><a href="">编程</a></li>
<li><a href="">看书</a></li>

</ul>
</li>
<li><a href="">学习</a>
<ul class="threemenu">
<li><a href="">DELPHI</a></li>
<li><a href="">asp.net</a></li>
<li><a href="">h5</a></li>
<li><a href="">英语</a></li>
<li><a href="">android</a></li>
</ul>
</li>
<li><a href="">生活</a>
<ul class="threemenu">
<li><a href="">做饭</a></li>
<li><a href="">买菜</a></li>

</ul>
</li>
<li><a href="">娱乐</a>
<ul class="threemenu">
<li><a href="">电影</a></li>
<li><a href="">电视</a></li>
<li><a href="">旅游</a></li>
<li><a href="">观光</a></li>

</ul>
</li>

</ul>

</li>
<li><a href="">任务</a></li>
<li><a href="">邮箱</a></li>
<li><a href="">登录</a></li>
</ul>
</body>
</html>

0 0