<!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> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // nav-li hover e var num; $('.nav-main>li[id]').hover(function(){ /*图标向上旋转*/ $(this).children().removeClass().addClass('hover-up'); /*下拉框出现*/ var Obj = $(this).attr('id'); num = Obj.substring(3, Obj.length); $('#box-'+num).slideDown(300); },function(){ /*图标向下旋转*/ $(this).children().removeClass().addClass('hover-down'); /*下拉框消失*/ $('#box-'+num).hide(); }); // hidden-box hover e $('.hidden-box').hover(function(){ /*保持图标向上*/ $('#li-'+num).children().removeClass().addClass('hover-up'); $(this).show(); },function(){ $(this).slideUp(200); $('#li-'+num).children().removeClass().addClass('hover-down'); }); }); </script>> <style> /** *在Position属性值为absolute的同时， *如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样） *的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位， *这对精确定位是很有帮助的。 */ *{ margin: 0; padding: 0; list-style-type:none; } /*nav导航盒子*/ div.nav{ 800px; height:36px; line-height: 36px; text-align: center; font-size: 12px; position: relative; background: #643519; margin:40px auto 0 auto; } /*nav-main*/ ul.nav-main{ 100%; height: 100%; list-style-type: none; } ul.nav-main span{ display: inline-block; margin-left: 18px; 7px; height: 7px; background: url('http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201512/jiaoben3844/img/down-icon.png') no-repeat; } /*图标向上旋转*/ .hover-up{ transition-duration: .5s; transform: rotate(180deg); -webkit-transform: rotate(180deg); } /*图标向下旋转*/ .hover-down{ transition-duration: .5s; transform: rotate(0deg); -webkit-transform: rotate(0deg); } /*导航条设置*/ ul.nav-main>li{ 120px; height: 100%; display: block; float: left; background: #643519; color: #fff; margin-right: 1px; cursor: pointer; } ul.nav-main>li:hover{ background: #643519; } /*隐藏盒子设置*/ div.hidden-box{ 118px; border: 1px solid #643519; border-top: 0; position: absolute; display:block; background:#fff; top: 36px; } .hidden-box>ul{ list-style-type: none; color: #643519; cursor: pointer; } .hidden-box li:hover{ background: #643519; color: #fff; } /*隐藏盒子位置设置*/ .hidden-loc-index{ left: 121px; } .hidden-loc-us{ left: 242px; } .hidden-loc-info{ left: 363px; } .box04{ left:485px; } </style> </style> </head> <body> <!--nav--> <div class="nav"> <!--导航条--> <ul class="nav-main"> <li>首页</li> <li id="li-1">关于CFOAM<span></span></li> <li id="li-2">信息中心<span></span></li> <li id="li-3">消费者服务<span></span></li> <li id="li-4">商务服务<span></span></li> <li>研究中心</li> </ul> <!--隐藏盒子--> <div id="box-1" class="hidden-box hidden-loc-index"> <ul> <li>目的意义</li> <li>发展历程</li> <li>组织架构</li> <li>精英团队</li> <li>关于我们</li> <li>商家信息</li> <li>加入我们</li> <li>关于我们</li> <li>产品信息</li> </ul> </div> <div id="box-2" class="hidden-box hidden-loc-us"> <ul> <li>加入联盟步骤</li> <li>申请要求</li> <li>关于我们</li> <li>商家信息</li> <li>加入我们</li> <li>关于我们</li> <li>产品信息</li> </ul> </div> <div id="box-3" class="hidden-box hidden-loc-info"> <ul> <li>消费者服务</li> <li>产品信息</li> <li>关于我们</li> <li>商家信息</li> <li>加入我们</li> <li>关于我们</li> <li>产品信息</li> <li>关于我们</li> <li>商家信息</li> <li>加入我们</li> <li>关于我们</li> <li>产品信息</li> </ul> </div> <div id="box-4" class="hidden-box hidden-loc-info box04"> <ul> <li>服务理念</li> <li>服务产品</li> <li>周边有机网络</li> <li>商铺汇总</li> <li>有机百科</li> <li>保障与维权</li> <li>关于我们</li> <li>商家信息</li> <li>加入我们</li> <li>关于我们</li> <li>产品信息</li> </ul> </div> </div> </div> </body> </html>