京东导航，添加中间的弹框栏，使用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. iOS：UIView、UIControl、UIButton、UILabel简单的属性和方法常识

    常见属性和方法 一 .UIVIew 常见属性 1.frame 位置和尺寸(以父控件的左上角为原点(0,0)) 2.center 中点 (以父控件的左上角为原点(0,0)) 3.bounds 位置和尺寸 ...

  2. 用ACE来写代码

    写在前面 在很多时候,我们想用一个支持高亮的WEB编辑器来做规则配置.代码编辑等,此时ACE应该是一个不错的选择,简单的用法如下: <!DOCTYPE html> <html lan ...

  3. python爬虫之scrapy框架

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以 ...

  4. DevExpress 小计 GridControl 隔行换行

    摘自: http://www.cnblogs.com/yuerdongni/archive/2012/09/08/2676753.html 1. 如何解决单击记录整行选中的问题 View->Op ...

  5. conkey conf

    update_interval 1.0 # 更新时间间隔double_buffer yes # 双缓存,解决Conky闪烁问题use_xft yes # 自定义字体xftfont DejaVu San ...

  6. Spring整合JMS——三种connectionFactory

    1.SingleConnectionFactory:对于建立JMS服务器链接的请求会一直返回同一个链接,并且会忽略Connection的close方法调用.(org.springframework.j ...

  7. Android技术——在Android中的随意视图中找控件

    1.在非常多情况下,我们可能不知道控件的id,可是我们却希望在包括这个控件的视图中找到它,能够採用例如以下做法: 例:在Activity的根视图中找出当中全部的Button控件 private voi ...

  8. java线程总结（3/5）

    一.线程同步和死锁问题 异步问题: package com.horizon.action; /** * 测试同步问题 * */ public class TestSync { public stati ...

  9. [LeetCode][Java] Substring with Concatenation of All Words

    题目: You are given a string, s, and a list of words, words, that are all of the same length. Find all ...

  10. win 2003 / IIS6 部署网站的时候，文件IO操作、删除项目文件， 会导致IIS重启，Session丢失问题

    项目中经常需要打些日志(文件IO读写操作),已记录调试.错误等信息.比较方便的有log4net等开源项目. 问题描述: 最近用win 2003 / IIS6,部署了一个2.0 的网站,在操作文件的时候 ...