CSS实现三级菜单

来源：互联网发布：阿里云青云 ucloud 编辑：程序博客网时间：2024/05/22 00:10
代码：（由上篇CSS实现二级菜单改写）
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;border: 0;}/*一级菜单样式*/.nav{border: 2px solid #FFEEEE;margin: 100px auto;width: 510px;height: 60px;border-right: none;}.nav>ul>li{list-style: none;width: 102px;height: 60px;float: left;}.nav>ul>li>a{text-decoration: none;display: block;width: 100px;height: 60px;line-height: 60px;text-align: center;color: #FFF;border-right: 2px solid #FFEEEE;background-color: #FFCCCC;}.nav>ul>li>a:hover{background-color: #FF6666;}/*二级菜单样式*/.nav>ul>li>ul{position: relative;background-color: #FFCCCC;display: none;}.nav>ul>li:hover>ul{display: block;}.nav>ul>li>ul>li{width: 100px;height: 60px;float: left;list-style: none;}.nav>ul>li>ul>li>a{display: block;text-decoration: none;text-align: center;width: 100%;height: 60px;line-height: 60px;background-color: #FFCCCC;color: #FFFFFF;}/*三级菜单样式*/.nav>ul>li>ul>li>ul{position: relative;background-color: #FFCCCC;display: none;}.nav>ul>li>ul>li>a:hover{background-color: #FF6666;}.nav>ul>li>ul>li:hover>ul{display: block;}.nav>ul>li>ul>li>ul>li{position: relative;width: 100px;height: 60px;float: left;list-style: none;border-right: 2px solid #FFEEEE;border-left: 2px solid #FFEEEE;border-top: 2px solid #FFEEEE;top: -60px;left: 100px;}.nav>ul>li>ul>li>ul>li>a{display: block;text-decoration: none;text-align: center;width: 100%;height: 60px;line-height: 60px;background-color: #FFCCCC;color: #FFFFFF;}.nav>ul>li>ul>li>ul>li>a:hover{background-color: #FF6666;}</style></head><body><div class="nav"><ul><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li></ul></li><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a>    <ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li></ul></li><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li><li><a href="#">二级菜单</a><ul><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li><li><a href="#">三级菜单</a></li></ul></li></ul></li><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a></li></ul></li><li><a href="#">一级菜单</a></li></ul></div></body></html>
图片效果：
阅读全文
0 0