京东导航，添加中间的弹框栏，使用position定位，放在左侧栏的li标签里面，成为一个整体，保证鼠标在弹框里的时候，弹框不消失：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="jquery.js" type="text/javascript"></script>

     <style type="text/css">

         *{

             margin: 0;

         }

         #head img{

             position: absolute;

             left: 50%;

             margin-left:-595px;

         }

         #head{

             position: relative;

             width: 100%;

             height: 80px;

             background-color: #f00;

         }

         .clear{

             clear: both;

         }

         #nav li{

             list-style: none;

             float: left;

             border: 1px solid #000;

             font-family: 微软雅黑;

             font-weight: bold;

             cursor: pointer;

             margin-left: 10px;

         }

         #nav{

             margin-left: 200px;

         }

         #left li{

             list-style: none;

             margin-top: 0px;

             border: 1px solid #000;

             padding-top: 2px;

             padding-bottom: 2px;

             padding-left: 10px;

             font-family: 微软雅黑;

             color: #fff;

         }

         #left ul{

             background-color: #888;

             width: 190px;

             height: 480px;

             margin-left: 50px;

             margin-top: 10px;

             padding-top: 10px;

             padding-left: 0px;

         }

         #left span{

             cursor: pointer;

         }

         #left{

             float: left;

             position: relative;

         }

         #images{

             margin-left: 10px;

             float: left;

             position: relative;

         }

         #largeImg{

             /*margin-left: 10px;*/

             margin-top: 10px;

         }

         #smallImg{

             margin-top: 10px;

             /*margin-left: 10px;*/

         }

         #welcom{

             width: 190px;

             height: 480px;

             background-color: #00f;

             margin-top: 10px;

             margin-left: 10px;

             float: left;

             position: relative;

         }

         #main{

             position: relative;

             /*position: absolute;*/

             left: 50%;

             margin-left: -595px;

         }

         .right{

             position: absolute;

             top: 10px;

             width: 800px;

             height: 480px;

             margin-left: 180px;

             margin-top: 0px;

             border: 1px solid #000;

             z-index: 3;

             color: #000;

             background-color: #eee;

             display: none;

         }

     </style>

 </head>

 <body>

     <!-- 广告 -->

     <div id="head"><img src="head.jpg"></div>

     <!-- main把三个div合到一起 -->

     <div id="main">

         <!-- 上侧导航 -->

         <div id="nav">

             <ul>

                 <li>秒杀</li>

                 <li>优惠券</li>

                 <li>闪购</li>

                 <li>拍卖</li>

             </ul>

         </div>

         <div class="clear"></div>

         <!-- 左侧导航 -->

         <div id="left">

             <ul>

                 <li><span>家用电器</span>

                     <div class="right">

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                         <div>电视/空调/洗衣机</div>

                     </div>

                 </li>

                 <li><span>手机/数码</span>

                     <div class="right">

                         <div>手机/对讲机/数码相机</div>

                     </div>

                 </li>

                 <li><span>男装/女装</span>

                     <div class="right">

                         <div>羽绒服/棉服/羊毛衫</div>

                     </div>

                 </li>

                 <li><span>电脑/办公</span>

                     <div class="right">

                         <div>笔记本/平板/显示器</div>

                     </div>

                 </li>

             </ul>

         </div>

         <!-- 右侧广告 -->

         <div id="images">

             <div id="largeImg">

                 <img src="1.jpg" alt="">

             </div>

             <!-- <div class="clear"></div> -->

             <div id="smallImg">

                 <img src="4.jpg" alt="">

                 <img src="5.jpg" alt="">

             </div>

         </div>

         <!-- 最右侧充话费 -->

         <div id="welcom">

             <div>注册</div>

             <div>登录</div>

         </div>

     </div>

 </body>

 <script>

     $('#nav li').hover(

         function(){

             $(this).css({"color":"#f00"});

         },

         function(){

             $(this).css({"color":"#000"});

         }

     );

     $('#left li').hover(

         function(){

             $(this).css({"background-color":"#ddd"});

             $(this).children('.right').show();

         },

         function(){

             $(this).css({"background-color":"#888"});

             $(this).children('.right').hide();

         }

     );

     $('#left span').hover(

         function(){

             $(this).css({"color":"#f00"});

         },

         function(){

             $(this).css({"color":"#fff"});

         }

     );

 </script>

 </html>

Jquery学习笔记（8）--京东导航菜单（2）增加弹框的更多相关文章

  1. jquery学习笔记(4)--实现table隔行变色以及单选框选中

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  3. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  4. jQuery ui背景色动态渐变导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  6. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  7. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  8. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

  9. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  10. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

随机推荐

  1. 使用node中的express解决vue-cli加载不到dev-server.js的问题

    在使用vue开发过程中,难免需要去本地数据地址进行请求,而原版配置在dev-server.js中,新版vue-webpack-template已经删除dev-server.js,改用webpack.d ...

  2. 把自动机用作 Key-Value 存储

    以前只有代码,最近简单写了一点文档: google code 上的链接(总是最新) 自动机是什么 DFA 的最小化 将 DFA 用做字典 无环DFA (ADFA, Acyclic DFA) 编译 内存 ...

  3. ubuntu16.04彻底卸载mysql并且重新安装mysql

    首先删除mysql: sudo apt-get remove mysql-* dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg -P 清理完毕: ...

  4. 云计算之路-阿里云上：SLB故障引发的网站不能正常访问

    2013年8月22日23:50~23:58左右,由于阿里云SLB(负载均衡)故障造成网站不能正常访问,给大家带来了麻烦,望大家谅解! 8月19日我们收到阿里云的短信通知: 尊敬的阿里云用户:      ...

  5. 云计算之路-阿里云上-新发现：又一种与虚拟内存有关的CPU波动情况

    在云上真是无奇不有,昨天偶然间发现在IIS的应用程序池回收设置中,仅仅设置了一下基于虚拟内存限制的回收,就引发了CPU有规律的波动.在这篇博文中,我们将向大家汇报一下云计算之路上的这个小发现. 在之前 ...

  6. Markdown 语法背一下咯

    标题 使用`=`和`-`标记一级和二级标题.  # 一级标题 ## 二级标题 使用`#`,可表示1-6级标题.  # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标 ...

  7. 前端工程化 ESlint 配置

    1.使用的标准 // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends ...

  8. 为什么用strlcpy取代strncpy

    为什么用strlcpy取代strncpy 标签: C, C语言, strlcpy, strncpy 标题: 为什么用strlcpy取代strncpy作者: Demon链接: http://demon. ...

  9. 【Windows】免费图片提取文字的方法

    今天意外的看到一个可以提取图片中文字的网站,自己试了下,提取效果还不错 网址为: https://zhcn.109876543210.com/ 现在有图片如下 我想从中提取的文字 1.打开网址,上传图 ...

  10. JavaScript入门：002—JS代码放置的位置

    JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?以下来看一下. 一般来说有两种方式.写在界面上和使用.js文件.1.1界面上的Head部分能够直接放在head标签内,例如以下代码 ...