CSS实现二级菜单

来源：互联网发布：客户信息统计软件编辑：程序博客网时间：2024/05/01 18:39
代码：
<!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;}</style></head><body><div class="nav"><ul><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li><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><li><a href="#">二级菜单</a></li></ul></li><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></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