效果图:

鼠标移动到菜单项后如下:

html:

 <div id="nav" class="mainNav"><ul class="nav"><li><a href="#">首 页</a></li><li><a href="#">品 牌</a><div class="jnNav"><div class="subitem"><dl class="fore"><dt><a href="#nogo">品牌:</a></dt><dd><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em ><a href="#nogo">安踏</a></em><em ><a href="#nogo">奥康</a></em><em ><a href="#nogo">骆驼</a></em><em ><a href="#nogo">特步</a></em><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em class="noborder"><a href="#nogo">特步</a></em></dd></dl><dl><dt><a href="#nogo">品牌:</a></dt><dd><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em ><a href="#nogo">安踏</a></em><em ><a href="#nogo">奥康</a></em><em ><a href="#nogo">骆驼</a></em><em ><a href="#nogo">特步</a></em><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em class="noborder"><a href="#nogo">特步</a></em></dd></dl></div></div></li><li><a href="#">女 装</a><div class="jnNav"><div class="subitem"><dl class="fore"><dt><a href="#nogo">女 装:</a></dt><dd><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em ><a href="#nogo">安踏</a></em><em ><a href="#nogo">奥康</a></em><em ><a href="#nogo">骆驼</a></em><em ><a href="#nogo">特步</a></em><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em class="noborder"><a href="#nogo">特步</a></em></dd></dl><dl><dt><a href="#nogo">女 装:</a></dt><dd><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em ><a href="#nogo">安踏</a></em><em ><a href="#nogo">奥康</a></em><em ><a href="#nogo">骆驼</a></em><em ><a href="#nogo">特步</a></em><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em class="noborder"><a href="#nogo">特步</a></em></dd></dl></div></div></li><li><a href="#">男 装</a><div class="jnNav"><div class="subitem"><dl class="fore"><dt><a href="#nogo">男 装:</a></dt><dd><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em ><a href="#nogo">安踏</a></em><em ><a href="#nogo">奥康</a></em><em ><a href="#nogo">骆驼</a></em><em ><a href="#nogo">特步</a></em><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em class="noborder"><a href="#nogo">特步</a></em></dd></dl><dl><dt><a href="#nogo">男 装:</a></dt><dd><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em ><a href="#nogo">安踏</a></em><em ><a href="#nogo">奥康</a></em><em ><a href="#nogo">骆驼</a></em><em ><a href="#nogo">特步</a></em><em ><a href="#nogo">耐克</a></em><em ><a href="#nogo">阿迪达斯</a></em><em ><a href="#nogo">达芙妮</a></em><em ><a href="#nogo">李宁</a></em><em class="noborder"><a href="#nogo">特步</a></em></dd></dl></div></div></li><li><a href="#">鞋包配饰</a></li></ul></div>

View Code

css:

/*导航样式开始*/
.mainNav {position: absolute;top: 68px;left: 0;height: 37px;line-height: 37px;width: 990px;z-index:100;background-color: #4A4A4A;
}
.mainNav .nav {display: inline;float: left;margin-left: 25px;
}
.mainNav ul li { float:left; display: inline;margin-right:14px;position: relative ;z-index:100;
}
.mainNav ul li a { display:block;padding:0 8px; font-weight:700;color:#fff;font-size:14px;
}
.mainNav ul li a:hover { background:none;
}
/* 二级菜单 */
.jnNav {background:#FFFFFF;border: 1px solid #B1B1B1;border-top:0;left: 0;overflow: hidden;position: absolute;top: 37px;width: 474px;z-index: 1000;display:none;
}
.jnNav .subitem {float: left;height: auto !important;min-height: 100px;padding: 10px 12px;width: 450px;
}
.jnNav .subitem dl {border-top: 1px dashed #C4C4C4;overflow: hidden;padding: 8px 0;float:left;
}
.jnNav .subitem .fore {border-top-style: none;padding-top: 0;
}
.jnNav .subitem dt {float: left;font-weight: bold;line-height: 16px;padding: 4px 3px;text-align: center;width: 76px;
}
.jnNav .subitem dt a {color: #000;font-weight: 700;font-size:12px;padding:0;
}
.jnNav .subitem dd {float: left;overflow: hidden;padding: 0;width: 364px;
}
.jnNav .subitem em {border-right: 1px solid #CCCCCC;float: left;font-style: normal;height: 14px;line-height: 14px;margin: 5px 0;padding: 0 8px;
}
.jnNav .subitem em a {color: #666666;white-space: nowrap;font-size:12px;font-weight:normal;padding:0;
}
.jnNav .subitem em.noborder {border-right: 0 none;
}

View Code

js:

//导航效果
$(function(){$("#nav li").hover(function(){$(this).find(".jnNav").show();},function(){$(this).find(".jnNav").hide();});
})

转载于:https://www.cnblogs.com/easy5weikai/p/3703127.html

【锋利的JQuery-学习笔记】菜单栏及其2级菜单相关推荐

  1. 锋利的JQuery学习笔记01

    1. JQuery的链式操作风格 <script type="text/javascript"> //等待dom元素加载完毕. $(document).ready(fu ...

  2. 锋利的jQuery学习笔记(4)-DOM操作

    1. DOM操作的分类: DOM Core:JavaScript中的getElementByID,getElementByTagName,getAttribute,setAttribute等方法都是其 ...

  3. jQuery学习笔记--目录

    jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...

  4. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  5. 【转载】jQuery学习笔记

    jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...

  6. jQuery学习笔记:Ajax(二)

    接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...

  7. jQuery学习笔记02:核心部分

    jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...

  8. jQuery学习笔记01:初试jQuery

    jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...

  9. jQuery学习笔记(二)

    jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素 使用HTML DOM 创建元素 var select=document.createElement("select& ...

  10. javaweb(03) jQuery学习笔记

    javaweb(03) jQuery学习笔记 jQuery介绍 什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...

最新文章

  1. 如何在ToolBar中显示文字和图标,自定义图标大小,并和MenuItem关联
  2. 复制百度文库的文字加什么后缀_WORD文档中如何复制样式
  3. Fluid 0.4 新版本正式发布
  4. 【BZOJ 4555】 4555: [Tjoi2016Heoi2016]求和 (NTT)
  5. ng-bind-html在ng-repeat中问题的解决办法
  6. 十五、K8s helm包管理与应用
  7. python中33个保留字的含义_Python的保留字。这是什么意思?
  8. 宝马屏幕共享android,宝马屏幕共享功能怎么用
  9. 2016-07-09Cpp_jianjie
  10. 右移一位和除二的区别
  11. python打印程序时间_Python:打印程序执行的时间
  12. PCL安装和环境配置
  13. stripe国际支付(对接支付宝、微信)
  14. ubuntu使用docker-compose安装rabbitmq并实现延迟交换机
  15. 不再纠结devDependencies与dependencies
  16. 试卷模板 html,A4纸试卷模板.doc
  17. 北邮+校徽+logo+矢量图+透明
  18. InDesign 教程如何导入文本?
  19. 查看服务器的外网地址
  20. 几何角度理解相机成像过程

热门文章

  1. java Vector.toArray 与强制类型转换
  2. windows端口号速查表
  3. Python发送邮件(Email SMTP)
  4. python进阶教程之异常处理
  5. 关于sqlite断电或者存储空间不足造成的数据文件损坏问题-转
  6. python中goto如何使用,基于python goto的正确用法说明
  7. 蓝桥杯 ADV-180 算法提高 陶陶摘苹果2
  8. ORA-01476: divisor is equal to zero解决方法
  9. linux系统环境下压缩与解压缩
  10. JAVA 字符串格式化-String.format()的使用(转)