Jquery实现仿京东二级导航条

来源：互联网发布：ubuntu16 apache 安装编辑：程序博客网时间：2024/04/29 00:59

<head>
 <title></title>
 <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: 188px;
 background: #FFFDD2;
 position: relative;
 z-index: 1;
 }
 .tips
 {
 line-height: 20px;
 position: absolute;
 width: 150px;
 height: 200px;
 border: 1px solid #E5D1A1;
 text-align: center;
 margin-top: -1px;
 background: #FFFDD2;
 z-index: 1;
 display: none;
 }
 </style>
 <script src="jquery-1.9.1.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": "188px", "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": "188px", "z-index": "1", "border": "1px solid #E5D1A1", "background": "#FFFDD2" });
                })

})
 })
 </script>
</head>
<body>
 <ul>
 <li><a href="#">.NET技术(10)</a></li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>编程语言(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>软件设计(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>Web前端(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>企业信息化(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>手机开发(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>软件工程(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>数据库技术(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>操作系统(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>其它分类(10)</li>
 <div class="tips">
 
 <a href="#">.NET新手</a>
 
 <a href="#">ASP.NET</a>
 
 <a href="#">C#</a>
 
 <a href="#">WinForm</a>
 
 <a href="#">SliverLight</a>
 
 <a href="#">WCF</a>
 
 <a href="#">CLR</a>
 
 <a href="#">WPF</a>
 
 <a href="#">WF</a>
 
 <a href="#">XNA</a>
 </div>
 <li>所有随笔(1000)</li>
 <li>所有评论(1000)</li>
 </ul>
</body>
</html>