css设计鼠标感应弹出二级菜单特效，鼠标经过导航菜单标题时弹出红色风格二级导航菜单特效，可根据自己的需求来修改。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>纯css实现鼠标感应弹出二级导航菜单特效_武鸣人</title>
<style type="text/css">
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}
#menu_wuming_ren {list-style-type:none; margin:0 auto 50px auto; padding:0; width:302px;}
#menu_wuming_ren li {padding:0; margin:0; position:relative; width:150px; height:1.7em; z-index:100;}
#menu_wuming_ren li dl {position:absolute; top:0; left:0; padding-bottom:0;}
#menu_wuming_ren li a, #menu_wuming_ren li a:visited {text-decoration:none;}
#menu_wuming_ren li dd {display:none;}
#menu_wuming_ren table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu_wuming_ren dl {width: 150px; margin: 0; padding: 0; background: transparent;}
#menu_wuming_ren dt {margin:0; padding: 0;}
#menu_wuming_ren dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left; width:150px; float:right; clear:right;}
#menu_wuming_ren dt a, #menu_wuming_ren dt a:visited {display:block; font-size: 0.9em; color: #c00; text-align:center; border:1px solid #c00; border-width:0 1px 1px 1px; background:#d4d4d4; padding:0.25em 0 0.75em 0;}
#menu_wuming_ren li a:hover {border:0;}
#menu_wuming_ren li:hover dd, #menu_wuming_ren li a:hover dd {display:block;}
#menu_wuming_ren li:hover dl, #menu_wuming_ren li a:hover dl {width:301px;}
#menu_wuming_ren li:hover dt a, #menu_wuming_ren a:hover dt a {color:#000; background:#ddd; border:1px solid #c00; border-width:0 1px 1px 1px;}
#menu_wuming_ren dd a, #menu_wuming_ren dd a:visited {background:#c00; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #c00; border-right:1px solid #c00; width:148px;}
#menu_wuming_ren dd a:hover {background: #ddd; color:#000; border-left:1px solid #c00; border-right:1px solid #c00;}
#menu_wuming_ren b {display:block; overflow:hidden; height:1px;}
b.p1_wuming {background:#c00; margin:0 5px;}
b.p2_wuming_ren {background:#d4d4d4; border:2px solid #c00; border-width:0 2px; margin:0 3px;}
b.p3_wwwwumingren {background:#d4d4d4; margin:0 2px; border:1px solid #c00; border-width:0 1px;}
b.p4_wumingren {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #c00; border-width:0 1px;}
b.p5 {background:#c00; margin:0 5px;}
b.p6 {background:#c00; margin:0 3px;}
b.p7_wuming__ren {background:#c00; margin:0 2px;}
b.p8__wwwwumingren {height:2px; background:#c00; margin:0 1px;}
#menu_wuming_ren li:hover b.p2_wuming_ren, #menu_wuming_ren a:hover b.p2_wuming_ren {background:#fff;}
#menu_wuming_ren li:hover b.p3_wwwwumingren, #menu_wuming_ren a:hover b.p3_wwwwumingren {background:#f0f0f0;}
#menu_wuming_ren li:hover b.p4_wumingren, #menu_wuming_ren a:hover b.p4_wumingren {background:#e8e8e8;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<ul id="menu_wuming_ren">
<li>
<!--[if lte IE 6]><a href="https://www.wuming.ren"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1_wuming"></b><b class="p2_wuming_ren"></b><b class="p3_wwwwumingren"></b><b class="p4_wumingren"></b><a href="https://www.wuming.ren">武鸣人一号</a></dt>
<dd><a href="https://www.wuming.ren" title="一号菜单一">一号菜单一</a></dd>
<dd><a href="https://www.wuming.ren" title="一号菜单二">一号菜单二</a></dd>
<dd><a href="https://www.wuming.ren" title="一号菜单三">一号菜单三</a></dd>
<dd><a href="https://www.wuming.ren" title="一号菜单四">一号菜单四</a></dd>
<dd><a href="https://www.wuming.ren" title="一号菜单五">一号菜单五</a></dd>
<dd><a href="https://www.wuming.ren" title="一号菜单六">一号菜单六</a></dd>
<dd><a href="https://www.wuming.ren" title="一号菜单七">一号菜单七</a></dd>
<dd><a href="https://www.wuming.ren" title="一号菜单八">一号菜单八</a></dd>
<dd><a href="https://www.wuming.ren" title="一号菜单九">一号菜单九</a><b class="p8__wwwwumingren"></b><b class="p7_wuming__ren"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="https://www.wuming.ren"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1_wuming"></b><b class="p2_wuming_ren"></b><b class="p3_wwwwumingren"></b><b class="p4_wumingren"></b><a href="https://www.wuming.ren">武鸣人二号</a></dt>
<dd><a href="https://www.wuming.ren" title="二号菜单一">二号菜单一</a></dd>
<dd><a href="https://www.wuming.ren" title="二号菜单二">二号菜单二</a></dd>
<dd><a href="https://www.wuming.ren" title="二号菜单三">二号菜单三</a></dd>
<dd><a href="https://www.wuming.ren" title="二号菜单四">二号菜单四</a></dd>
<dd><a href="https://www.wuming.ren" title="二号菜单五">二号菜单五</a></dd>
<dd><a href="https://www.wuming.ren" title="二号菜单六">二号菜单六</a></dd>
<dd><a href="https://www.wuming.ren" title="二号菜单七">二号菜单七</a></dd>
<dd><a href="https://www.wuming.ren" title="二号菜单八">二号菜单八</a></dd>
<dd><a href="https://www.wuming.ren" title="二号菜单九">二号菜单九</a><b class="p8__wwwwumingren"></b><b class="p7_wuming__ren"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="https://www.wuming.ren"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1_wuming"></b><b class="p2_wuming_ren"></b><b class="p3_wwwwumingren"></b><b class="p4_wumingren"></b><a href="https://www.wuming.ren">武鸣人三号</a></dt>
<dd><a href="https://www.wuming.ren" title="三号菜单一">三号菜单一</a></dd>
<dd><a href="https://www.wuming.ren" title="三号菜单二">三号菜单二</a></dd>
<dd><a href="https://www.wuming.ren" title="三号菜单三">三号菜单三</a></dd>
<dd><a href="https://www.wuming.ren" title="三号菜单四">三号菜单四</a></dd>
<dd><a href="https://www.wuming.ren" title="三号菜单五">三号菜单五</a></dd>
<dd><a href="https://www.wuming.ren" title="三号菜单六">三号菜单六</a></dd>
<dd><a href="https://www.wuming.ren" title="三号菜单七">三号菜单七</a></dd>
<dd><a href="https://www.wuming.ren" title="三号菜单八">三号菜单八</a></dd>
<dd><a href="https://www.wuming.ren" title="三号菜单九">三号菜单九</a><b class="p8__wwwwumingren"></b><b class="p7_wuming__ren"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="https://www.wuming.ren"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1_wuming"></b><b class="p2_wuming_ren"></b><b class="p3_wwwwumingren"></b><b class="p4_wumingren"></b><a href="https://www.wuming.ren">武鸣人四号</a></dt>
<dd><a href="https://www.wuming.ren" title="四号菜单一">四号菜单一</a></dd>
<dd><a href="https://www.wuming.ren" title="四号菜单二">四号菜单二</a></dd>
<dd><a href="https://www.wuming.ren" title="四号菜单三">四号菜单三</a></dd>
<dd><a href="https://www.wuming.ren" title="四号菜单四">四号菜单四</a></dd>
<dd><a href="https://www.wuming.ren" title="四号菜单五">四号菜单五</a></dd>
<dd><a href="https://www.wuming.ren" title="四号菜单六">四号菜单六</a></dd>
<dd><a href="https://www.wuming.ren" title="四号菜单七">四号菜单七</a></dd>
<dd><a href="https://www.wuming.ren" title="四号菜单八">四号菜单八</a></dd>
<dd><a href="https://www.wuming.ren" title="四号菜单九">四号菜单九</a><b class="p8__wwwwumingren"></b><b class="p7_wuming__ren"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</body>
</html>本文来自武鸣人网站，转载请注明出处