jquery实现红色竖向多级向右展开的导航菜单效果

本文实例讲述了jquery实现红色竖向多级向右展开的导航菜单效果。分享给大家供大家参考。具体如下：

这里介绍的是一款红色竖向多级向右展开的导航菜单，多用于博客网站的导航菜单，红色风格，非常漂亮，向右伸展的菜单。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-红色-样式-显示-菜单-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题红色竖向多级向右展开的导航菜单/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' .nav { float:left位置：相对；宽度宽度：253px}h2、ul、p {余量：0划水：0;文本对齐：居中；} H2 { font-weight :400；字号：100%；背景技术# 9b 203 fborder-底部：实心1px # 500 C1B} H2 a { list-style-type : none；高度：37 pxcolor: # fff线高：37 px} ul { font-size :0背景技术# 9b 203 Fpadding :0 0 40px } ul Li { list-style-type : none；填充-底部：5 pxcolor : # ffffont-size :14 px；padding:0重量：34px线高：34 px位置：相对；}ul阿利{边框-底部： dad 1px # E67a 92显示：块；宽度宽度：196pxmargin:0自动} ul Li。hover _ BG {后台： # c 30431}.Secon _ Dary { width:253px背景# C30431位置：绝对；右侧：-253 px；top:0填充-底部：30 pxdisplay:none}。Secon _ Dary p { padding:0 20px }。secon _ Dary a { display : block height :34 px线高：34 pxcolor : # fffborder-bottom : dash 1px # E67a 92；} a { cursor:pointer}/style脚本src=' http : jquery-1。6 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。ready(function(){ $(')).nav ul li ').悬停(function(){ $(this)).添加CLaSS(' hover _ BG ')；$(这个)。儿童(' div ').show()；}，function(){ $(this).移除CLaSS(' hover _ BG ')；$(这个)。儿童(' div ').hide()；})希望本文所述对大家的jquery程序设计有所帮助。