<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("ul li").each(function (index) {
            $(this).mouseover(function () {
                var obj = $(this).offset();
                var xobj = obj.left + 190 + "px";
                var yobj = obj.top - 50 + "px";
                $(this).css({ "width": "190px", "z-index": "9999", "border-right": "none", "background": "#fff" });
                $("ul > div:eq(" + index + ")").css({ "left": xobj, "top": yobj }).show();
            }).mouseout(function () {
                $("ul > .tips").hide();
                $(this).css({ "width": "200px", "z-index": "1", "border": "1px solid #E5D1A1", "background": "#FFFDD2" })
            })

})
        $("div").each(function () {
            $(this).mouseover(function () {
                $(this).prev("li").css({ "width": "190px", "z-index": "9999", "border-right": "none", "background": "#fff" })
                $(this).show();
            }).mouseout(function () {
                $(this).hide();
                $(this).prev("li").css({ "width": "200px", "z-index": "1", "border": "1px solid #E5D1A1", "background": "#FFFDD2" });
            })
        })
    })
</script>
</head>
<body>
   
<ul>
<li><a href="#">baidu</a></li>
<div class="tips">
<p><a href="http://www.baidu.com">baidu </a></p>

<p><a href="http://www.baidu.com">baidu </a></p>
</div>
<li>goolge</li>
<div class="tips">
<p><a href="http://www.google.com">google</a></p>
<p><a href="http://www.google.com">google</a></p>
</div>
<li>yahoo</li>
<div class="tips">
<p><a href="http://www.yahoo.com">yahoo</a></p>
<p><a href="http://www.yahoo.com">yahoo</a></p>
</div>
<li>microsoft</li>
<div class="tips">
<p><a href="http://www.microsoft.com">microsoft</a></p>
<p><a href="http://www.microsoft.com">microsoft</a></p>
</div>
</ul>

<style type="text/css">
html{color:#666;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
table{border-collapse:collapse;border-spacing:0;}
img{border:none;}
a{text-decoration:none; color:#666;}
a:hover{text-decoration:underline; color:#FF6600;}
ul,li{list-style-type:none;}
q:before,q:after{content:'';}
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}
/* All reset */
body{ margin:100px;}
ul li{line-height:30px; border:1px solid #E5D1A1; text-align:center; margin-top:-1px; width:200px; background:#FFFDD2; position:relative; z-index:1;}
.tips{position:absolute; width:150px; height:150px; border:1px solid #E5D1A1; background:#fff; z-index:2; display:none;}
</style>
</body>
</html>

转载原文：http://www.jb51.net/article/35992.htm

简单仿京东导航下拉菜单 javascript的更多相关文章

  1. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

  2. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  3. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  4. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  5. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  6. 兼容ie7的导航下拉菜单

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

  7. 下拉菜单--JavaScript触发方法

    1. $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown( ...

  8. bootstrap：导航下拉菜单

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  9. js导航下拉菜单

    使用定时器.鼠标移动事件 var img = $('#user_head'); var menu = $('.nav_list'); var i=0; var timer; img.mouseente ...

随机推荐

  1. 五子棋Web版的开发（三）

    最近在这个上面花费的时间不多,进展不大,而且遇到了一个问题好久也没有解决..我将struct2 改为Spring MVC.但是ziRUL的自动映射却无法起作用.   一直不知道为什么会出现这个问题.. ...

  2. 五子棋Web版的开发（二）--整合Spring4.3+hibernate4+Struts2.3

    拖了这么久才把ssh框架给整合完毕,期间发现自己对SSH的知识真的是知之甚少.在整合期间遇到了无数的坑,我还是先把项目地址发一下吧 首先我遇到的第一个问题是 CreateQuery is not va ...

  3. mysql 时间差问题集锦

    SELECT * from grouptoadd where taskid = '103244'; select datediff(max(spreadtime),min(createtime)) f ...

  4. 关于LZO和LZOP

    LZO  是一个适合实时解压.压缩的压缩库 LZOP 基于LZO库的压缩解压工具   PS:有了压缩解压库LZO,还不能直接操作文件压缩解压,需要LZOP   下载的话直接google吧~~~  

  5. hdu 4704 Sum 费马小定理

    题目链接 求2^n%mod的值, n<=10^100000. 费马小定理 如果a, p 互质, 那么a^(p-1) = 1(mod p)  然后可以推出来a^k % p = a^(k%(p-1) ...

  6. Linux C 实现Ping功能的程序.

    ping命令是用来查看网络上另一个主机系统的网络连接是否正常的一个工具.ping命令的工作原理是:向网络上的另一个主机系统发送ICMP报文,如果指定系统得到了报文,它将把报文一模一样地传回给发送者,这 ...

  7. 整理网站优化（SEO）的方案

    首先,我们来确定一下seo方案的定义是什么,所谓seo方案是指针对于某个网站,在完成了解熟悉的情况下,结合自身的一套seo优化方法来制定完成符合这个网站seo推广思路和策略.接下来就了解一下新手seo ...

  8. 8，SSO,，eager copy，COW

    针对字符串不同的长度,“编译器”选择不同的优化策略:SSO, eager copy,COW,分别针对短字符串,中等长度字符串,长字符串.不过,现在(2016)的大多数编译器(gcc 4.9.1,vs2 ...

  9. ORA-20000:ORU-10027:buffer overflow,limit of 10000 bytes错误4

    今天再测试一个存储过程时,用DBMS_OUTPUT.PUT_LINE输出时,报 ORA-20000:ORU-10027:buffer overflow,limit of 10000 bytes SQL ...

  10. CreateFile,ReadFile等API详解（或者说MSDN的翻译）

    一.*****CreateFile***** 这个函数可以创建或打开一个对象的句柄,凭借此句柄就可以控制这些对象:控制台对象.通信资源对象.目录对象(只能打开).磁盘设备对象.文件对象.邮槽对象.管道 ...