游戏
教程
专题
首页
网页特效
导航菜单
jquery多级导航菜单特效代码
作者：袖梨
2022-06-25
提示：您可以先修改部分代码再运行
<!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/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>"> .nav{float:left;position:relative;} 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;color:#fff;line-} 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;line-position:relative;} ul li a{border-bottom:dashed 1px #E67A92;display:block;margin:0 auto;} ul li.hover_bg{background:#C30431;} .Secon_Dary{background:#C30431;position:absolute;right:-253px;top:0;padding-bottom:30px;display:none;} .Secon_Dary p{padding:0 20px;} .Secon_Dary a{display:block;line-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><a>ALL CATEGORIES</a></h2> <ul> <li> <a>Posojg</a> <div class="Secon_Dary"> <p> <a href="http://js.alixixi.com">网页特效</a> <a>BBBBBB</a> <a>AAAAAAAAAAA</a> <a>BBBBBB</a> <a>AAAAAAAAAAA</a> <a>BBBBBB</a> <a>AAAAAAAAAAA</a> <a>BBBBBB</a> </p> </div> </div> </section> <section class="wrap-box"> <div class="g-tit"> <h2>相关文章</h2> </div> <ul class="s-list nobord notop"> <li> <a href="/art-457905.htm" class="s-card"> <div class="s-card-l"> <p class="tit">交错战线冰川天女昆仑不朽如何养成</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2025-08-15</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20250815/logo_689ee6000c2651.jpg" alt="交错战线冰川天女昆仑不朽如何养成" /> </div> </a> </li> <li> <a href="/art-457959.htm" class="s-card"> <div class="s-card-l"> <p class="tit">英雄联盟手游蛮王怎么加点-泰达米尔技能加点顺序</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2025-08-15</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20250815/logo_689f057e4e6561.jpg" alt="英雄联盟手游蛮王怎么加点-泰达米尔技能加点顺序" /> </div> </a> </li> <li> <a href="/art-457906.htm" class="s-card"> <div class="s-card-l"> <p class="tit">火影忍者木叶高手旗木卡卡西有哪些技能</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2025-08-15</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20250815/logo_689ee600da31a1.jpg" alt="火影忍者木叶高手旗木卡卡西有哪些技能" /> </div> </a> </li> <li> <a href="/art-457907.htm" class="s-card"> <div class="s-card-l"> <p class="tit">奥特曼超时空英雄欧布猛斯王如何</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2025-08-15</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20250815/logo_689ee601f37bc1.jpg" alt="奥特曼超时空英雄欧布猛斯王如何" /> </div> </a> </li> <li> <a href="/art-457908.htm" class="s-card"> <div class="s-card-l"> <p class="tit">迷雾大陆平A流怎么搭配</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2025-08-15</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20250815/logo_689ee602cb0971.jpg" alt="迷雾大陆平A流怎么搭配" /> </div> </a> </li> <li> <a href="/art-457909.htm" class="s-card"> <div class="s-card-l"> <p class="tit">萤火突击巅峰夺金季有什么活动</p> <div class="info"> <span class="person">游戏攻略</span> <span class="time">2025-08-15</span> </div> </div> <div class="s-card-pic"> <img src="/images/lazy.gif" data-src="/uploads/20250815/logo_689ee60373f6c1.jpg" alt="萤火突击巅峰夺金季有什么活动" /> </div> </a> </li> </ul> </section> <section class="wrap-box"> <div class="g-tit"> <h2>精彩推荐</h2> </div> <ul class="card-box"> <li class="card3"> <a href="/app/128507.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250729/logo_6888567cb07fd1.jpg" alt="原始人逆袭" /> </div> <p class="figure-head">原始人逆袭</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/132449.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250811/logo_689942b6468251.jpg" alt="汽车人终极变形" /> </div> <p class="figure-head">汽车人终极变形</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/128515.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250729/logo_6888568679ec31.png" alt="超级大冒险" /> </div> <p class="figure-head">超级大冒险</p> <span class="figure-btn">下载</span> </a> </li> <li class="card3"> <a href="/app/126528.htm" target="_self" class="figure"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250723/logo_68806e11c3f911.jpg" alt="疯狂双人对战" /> </div> <p class="figure-head">疯狂双人对战</p> <span class="figure-btn">下载</span> </a> </li> </ul> <ul class="card-box-b"> <li class="card10"> <a href="/app/130081.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250804/logo_68900776c74bd1.png" alt="毁灭者进攻" /> </div> <div class="figure-cont"> <p class="figure-head">毁灭者进攻</p> <div class="figure-desc"> <span>模拟经营</span> <span>毁灭者进攻</span> </div> <div class="figure-desc"> <p>毁灭者进攻描绘了一个充满危机的末日世界，玩家需在废墟中冒险搜</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/134761.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250815/logo_689edb691095c1.png" alt="球球旅行记" /> </div> <div class="figure-cont"> <p class="figure-head">球球旅行记</p> <div class="figure-desc"> <span>模拟经营</span> <span>球球旅行记</span> </div> <div class="figure-desc"> <p>球球旅行记带你踏上环球美食之旅，从阳光灿烂的悉尼到灯火璀璨的</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/131181.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250806/logo_6892b8547e31e1.png" alt="城市停车模拟" /> </div> <div class="figure-cont"> <p class="figure-head">城市停车模拟</p> <div class="figure-desc"> <span>模拟经营</span> <span>城市停车模拟</span> </div> <div class="figure-desc"> <p>城市停车模拟让你体验超真实的倒车挑战，从立体车库到狭窄街道，</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/134326.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250814/logo_689d44cfca2241.png" alt="医生来啦" /> </div> <div class="figure-cont"> <p class="figure-head">医生来啦</p> <div class="figure-desc"> <span>模拟经营</span> <span>医生来啦</span> </div> <div class="figure-desc"> <p>医生来啦让你化身宠物医院院长，一边救治可爱的动物，一边扩建你</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> <li class="card10"> <a href="/app/133426.htm" target="_self" class="figure2"> <div class="figure-box"> <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250812/logo_689aa135d93e41.jpg" alt="来个甜甜圈" /> </div> <div class="figure-cont"> <p class="figure-head">来个甜甜圈</p> <div class="figure-desc"> <span>模拟经营</span> <span>来个甜甜圈</span> </div> <div class="figure-desc"> <p>甜甜圈乐园带你体验开甜品店的快乐！开一家自己的小店，从零开始</p> </div> </div> <span class="figure-btn">下载</span> </a> </li> </ul> </section> <footer class="foot"> <a href="/" class="logo-icon"> <img src="/mobile/images/logo2.png" alt="一聚教程网"> </a> <p>Copyright © 2010-2022</p> <p>111cn.net All Rights Reserved</p> </footer> <script> var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"}; </script> <script src="/jspc/funcmob.js" type="text/javascript"></script> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DSRRGRV1TL'); </script> <div class="back-top" style="display: block;"> <span class="icon-box"> <svg class="icon" viewBox="0 0 1024 1024"> <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path> </svg> </span> </div> </div> <script src="/js/stat.js"></script> </body> </html>
