CSS的三级菜单

最新推荐文章于 2023-06-04 20:40:24 发布

sdppboy

最新推荐文章于 2023-06-04 20:40:24 发布

阅读量258

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/sdppboy/article/details/53452697

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

sdppboy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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;
复制链接

扫一扫