导航栏效果图：
就不多啰嗦，这东西不难就是大多人不想写样式
直接上代码：
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery下拉导航例子</title> <link media="screen" rel="stylesheet" href="demo.css"/> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> </head> <script type="text/javascript"> jQuery(document).ready(function(){ var qcloud={}; $('[_t_nav]').hover(function(){ var _nav = $(this).attr('_t_nav'); clearTimeout( qcloud[ _nav + '_timer' ] ); qcloud[ _nav + '_timer' ] = setTimeout(function(){ $('[_t_nav]').each(function(){ $(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('nav-up-selected'); }); $('#'+_nav).stop(true,true).slideDown(200); }, 150); },function(){ var _nav = $(this).attr('_t_nav'); clearTimeout( qcloud[ _nav + '_timer' ] ); qcloud[ _nav + '_timer' ] = setTimeout(function(){ $('[_t_nav]').removeClass('nav-up-selected'); $('#'+_nav).stop(true,true).slideUp(200); }, 150); }); }); </script> <body> <div class="head-v3"> <div class="navigation-up"> <div class="navigation-inner"> <div class="navigation-v3"> <ul> <li class="nav-up-selected-inpage" _t_nav="home"> <h2> <a href="#">首页</a> </h2> </li> <li class="" _t_nav="product"> <h2> <a href="#">云产品</a> </h2> </li> <li class="" _t_nav="wechat"> <h2> <a href="#">微信建站</a> </h2> </li> <li class="" _t_nav="solution"> <h2> <a href="#">行业解决方案</a> </h2> </li> <li class="" _t_nav="cooperate"> <h2> <a href="#">合作伙伴</a> </h2> </li> <li _t_nav="support"> <h2> <a href="#">帮助与支持</a> </h2> </li> </ul> </div> </div> </div> <div class="navigation-down"> <div id="product" class="nav-down-menu menu-1" style="display: none;" _t_nav="product"> <div class="navigation-down-inner"> <dl style="margin-left: 100px;"> <dt>计算机与网络</dt> <dd> <a hotrep="hp.header.product.compute1" href="#">云服务器</a> </dd> <dd> <a hotrep="hp.header.product.compute2" href="#">弹性Web引擎</a> </dd> <dd> <a hotrep="hp.header.product.compute3" href="#">负载均衡</a> </dd> </dl> <dl> <dt>存储与cdn</dt> <dd> <a hotrep="hp.header.product.storage1" href="#">云数据库</a> </dd> <dd> <a hotrep="hp.header.product.storage2" href="#">NoSQL高速存储</a> </dd> <dd> <a hotrep="hp.header.product.storage4" href="#">对象存储服务(beta)</a> </dd> <dd> <a hotrep="hp.header.product.storage3" href="#">CDN</a> </dd> </dl> <dl> <dt>监控与安全</dt> <dd> <a hotrep="hp.header.product.monitoring1" href="#">云监控</a> </dd> <dd> <a hotrep="hp.header.product.monitoring2" href="#">云安全</a> </dd> <dd> <a hotrep="hp.header.product.monitoring3" href="#">云拨测</a> </dd> </dl> <dl> <dt>数据分析</dt> <dd> <a hotrep="hp.header.product.analysis1" href="#">腾讯云分析</a> </dd> <dd> <a hotrep="hp.header.product.analysis2" href="#">关键因子</a> </dd> </dl> <dl> <dt>开发者工具</dt> <dd> <a hotrep="hp.header.product.devtool1" href="#">移动加速</a> </dd> <dd> <a hotrep="hp.header.product.devtool2" href="#">应用加固</a> </dd> <dd> <a hotrep="hp.header.product.devtool3" href="#">信鸽推送</a> </dd> </dl> <dl> <dt>开发者服务</dt> <dd> <a hotrep="hp.header.product.service1" href="#">安全认证服务</a> </dd> <dd> <a hotrep="hp.header.product.service2" href="#">域名备案</a> </dd> </dl> </div> </div> <div id="solution" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="solution"> <div class="navigation-down-inner"> <dl style="margin-left: 380px;"> <dd> <a class="link" hotrep="hp.header.solution.1" href="#">微信</a> </dd> </dl> <dl> <dd> <a class="link" hotrep="hp.header.solution.2" href="#">游戏</a> </dd> </dl> <dl> <dd> <a class="link" hotrep="hp.header.solution.3" href="#">移动应用</a> </dd> </dl> </div> </div> <div id="support" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="support"> <div class="navigation-down-inner"> <dl style="margin-left: 610px;"> <dd> <a class="link" hotrep="hp.header.support.1" href="#">资料库</a> </dd> </dl> <dl> <dd> <a class="link" hotrep="hp.header.support.2" href="#">论坛</a> </dd> </dl> <dl> <dd> <a class="link" hotrep="hp.header.support.3" href="#">亿元扶持</a> </dd> </dl> </div> </div> <div id="cooperate" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="cooperate"> <div class="navigation-down-inner"> <dl style="margin-left: 480px;"> <dd> <a hotrep="hp.header.partner.1" href="#">代理商</a> </dd> </dl> <dl> <dd> <a hotrep="hp.header.partner.2" href="#">微信服务商</a> </dd> </dl> <dl> <dd> <a hotrep="hp.header.partner.3" href="#">创投机构</a> </dd> </dl> </div> </div> </div> </div> </body> </html>dome.css
@charset "UTF-8"; html{font-size:62.5%;font-family:'helvetica neue',tahoma,arial,'hiragino sans gb','Simsun',sans-serif} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr{margin:0;padding:0} body{line-height:1.333;font-size:12px} h1,h2,h3,h4,h5,h6{font-size:100%;font-family:arial,'hiragino sans gb','microsoft yahei','Simsun',sans-serif} li{list-style:none} a:link,a:visited{text-decoration:none} .head-v3{position:relative;z-index:100;min-width:1000px} .head-v3 .navigation-inner{margin:0 auto;width:980px;position:relative} .navigation-up{height:60px;background:#27303f} .navigation-up .navigation-v3{margin-left:155px;float:left;_margin-left:10px} .navigation-up .navigation-v3 ul{float:left} .navigation-up .navigation-v3 li{float:left;font:normal 16px/59px "microsoft yahei";color:#fff} .navigation-up .navigation-v3 .nav-up-selected{background:#344157} .navigation-up .navigation-v3 .nav-up-selected-inpage{background:#202833} .navigation-up .navigation-v3 li h2{font-weight:normal;padding:0;margin:0} .navigation-up .navigation-v3 li h2 a{padding:0 25px;color:#fff;display:inline-block;height:60px;font-family:"microsoft yahei"} .navigation-down{position:absolute;top:60px;left:0px;width:100%} .navigation-down .nav-down-menu{width:100%;margin:0;background:#344157;position:absolute;top:0px} .navigation-down .nav-down-menu .navigation-down-inner{margin:auto;width:1200px;position:relative} .navigation-down .nav-down-menu dl{float:left;margin:18px 80px 18px 0} .navigation-down .menu-1 dl{margin:20px 80px 25px 0} .navigation-down .menu-1 dt{font:normal 16px "microsoft yahei";color:#61789e;padding-bottom:10px;border-bottom:1px solid #61789e;margin-bottom:10px} .navigation-down .menu-1 dd a{color:#fff;font:normal 14px/30px "microsoft yahei"} .navigation-down .menu-1 dd a:hover{color:#60aff6} .navigation-down .menu-2 dd a,.navigation-down .menu-3 dd a{color:#fff;font:normal 16px "microsoft yahei"} 接着引入jquery-1.7.1.min.js 或 其他版本jquery库
对部分自己需要的调整就可以了！ 请大家多多指正 共同进步 ~
原文链接：https://blog.csdn.net/zeng092210/article/details/89926993?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918471416781818737407%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918471416781818737407&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-15-89926993-null-null.nonecase&utm_term=%E5%85%8D%E5%A4%87%E6%A1%88cdn
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/2454
