今天小编跟大家讲解下有关纯CSS(无JS)实现的二级弹出菜单效果代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS(无JS)实现的二级弹出菜单效果代码 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了纯CSS(无JS)实现的二级弹出菜单效果代码。分享给大家供大家参考。具体如下：
这是一款采用纯CSS(无JS)制作的二级弹出菜单，你会发现这款菜单并没有使用Javascript代码，也没有引用外部文件，但是它却产生了类似JS菜单一样的效果。呵呵，这是用纯CSS代码实现的，不相信的话自己看代码吧。
运行效果如下图所示：
在线演示地址如下：
http://demo.aidi.net.cn/js/2015/css-2lelvel-alert-menu-style-codes/
具体代码如下：
复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>二级弹出菜</title><style type="text/css">*{ margin:0; padding:0;}.menu { display:block; font-family: arial, sans-serif; width:940px; position:relative; height:auto; background: #06F;}.menu ul { padding:0; margin:0; list-style-type: none;}.menu ul li { float:left; width:102px; background: #03F;}.menu ul li.end { height:35px; float:right; width:10px; background: #03F;}.menu ul li a, .menu ul li a:visited {display:block; text-align:center; text-decoration:none; width:104px; height:35px; color:#fff; line-height:34px; font-size:14px;background: #03F;}.menu ul li.first a, .menu ul li.first a:visited {display:block; text-align:center; text-decoration:none; width:110px; height:35px; color:#fff; line-height:34px; font-size:14px;background: #03F;}.menu ul li ul {display: none;}.menu ul li:hover a {color:#000; background: #03F; }.menu ul li:hover.first a {color:#000; background: #03F; }.menu ul li:hover ul {display:block; position:absolute;left:0;top:35px; width:805px;}.menu ul li:hover ul li a { float:left;display:block; background:#faeec7; color:#000;}.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}</style></head><body><div class="menu"><ul><li class="first"><a href="">首页</a></li><li><a class="hide"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 class="hide"href="">产品展示</a> <ul class="right_side"> <li><a href="">三级菜单内容</a></li> <li><a href="">三级菜单内容</a></li> <li><a href="">三级菜单内容</a></li> </ul></li><li><a class="hide"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></ul></div></body></html>
希望本文所述对大家的div+css程序设计有所帮助。
来源：爱蒂网
