纯CSS(无JS)实现的二级弹出菜单效果代码

本文实例讲述了纯CSS(无JS)实现的二级弹出菜单效果代码。分享给大家供大家参考。具体如下：@H_406_1@

这是一款采用纯CSS(无JS)制作的二级弹出菜单，你会发现这款菜单并没有使用JavaScript代码，也没有引用外部文件，但是它却产生了类似JS菜单一样的效果。呵呵，这是用纯CSS代码实现的，不相信的话自己看代码吧。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/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程序设计有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！