jquery多级导航菜单特效代码

提示：您可以先修改部分代码再运行

<!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=utf-8" />
<title>jquery多级导航菜单特效</title>
<style type="text/css">
 .nav{float:left;position:relative;width:253px;}
 h2,ul,p{margin:0;padding:0;text-align:center;}
 h2{font-weight:400;font-size:100%;background:#9B203F;border-bottom:solid 1px #500C1B;}
 h2 a{list-style-type:none;height:37px;color:#fff;line-height:37px;}
 ul{font-size:0;background:#9B203F;padding:0 0 40px;}
 ul li{list-style-type:none;padding-bottom:5px;color:#fff;font-size:14px;padding:0 20px;height:34px;line-height:34px;position:relative;}
 ul li a{border-bottom:dashed 1px #E67A92;display:block;width:196px;margin:0 auto;}
 ul li.hover_bg{background:#C30431;}
 .Secon_Dary{width:253px;background:#C30431;position:absolute;right:-253px;top:0;padding-bottom:30px;display:none;}
 .Secon_Dary p{padding:0 20px;}
 .Secon_Dary a{display:block;height:34px;line-height:34px;color:#fff;border-bottom:dashed 1px #E67A92;}
 a{cursor:pointer;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $(".nav ul li").hover(function(){
    $(this).addClass("hover_bg");
    $(this).children("div").show();
   },function(){
    $(this).removeClass("hover_bg"); 
    $(this).children("div").hide();
   })
     
 })
</script>
</head>

<body>
 <div class="nav">
     <h2>ALL CATEGORIES</h2>
        <ul>
         <li>
             Posojg
             <div class="Secon_Dary">
                 <p>
                        网页特效
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                    </p>
                </div>
            </li>
            <li>
             FOwojg
                <div class="Secon_Dary">
                 <p>
                        网页模板
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                    </p>
                </div>           
            </li>
            <li>
             Sowgjed
                <div class="Secon_Dary">
                 <p>
                        网页制作教程
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                    </p>
                </div>
            </li>
            <li>
             Gowjgeo
                <div class="Secon_Dary">
                 <p>
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                        AAAAAAAAAAA
                        BBBBBB
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

补充：网页特效,导航菜单