<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ padding:0px; margin:0px;}
ul,li{ list-style:none;}
li{ position:relative; height:30px; line-height:30px; text-align:center;}
a{ text-decoration:none;}
ul.one{width:100px; background-color:#f4f3f3;border:#ddd 1px solid;}
ul.one ul{ display:none; position:absolute; left:100px; top:0px; width:100px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){

$('ul.one li').each(function(){
$(this).mouseover(function(){
if($(this).has('ul').length>0)
{
$(this).find('>ul').show();
}
else{
$(this).siblings().find('ul').hide();
}
})
})

$('ul.one ul').each(function(){
$(this).mouseout(function(){
$(this).hide();
})
})

})
</script>
</head>

<body>
<ul class="one">
<li><a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a>
<ul>
<li><a href="#">三级导航</a></li>
<li><a href="#">三级导航</a></li>
<li><a href="#">三级导航</a></li>
<li>
<a href="#">三级导航</a>
<ul>
<li><a href="#">四级导航</a></li>
<li><a href="#">四级导航</a></li>
<li><a href="#">四级导航</a></li>
<li><a href="#">四级导航</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a></li>
<li><a href="#">一级导航</a></li>
<li>
<a href="#">一级导航</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">一级导航</a></li>
</ul>

</body>
</html>

JQ N级导航的更多相关文章

  1. jquery 实现两级导航菜单

    主要用于运维系统, 对界面要求不高的场合.  深深感到自己页面设计能力弱爆了,只能借鉴一下了, 交互逻辑还可以胜任一点. 直接贴代码: 1.  HTML 页面及 JS 交互, 注意引入 Jquery ...

  2. 高德AR & 车道级导航技术演进与实践

    2020云栖大会于9月17日-18日在线上举行,阿里巴巴高德地图携手合作伙伴精心组织了"智慧出行"专场,为大家分享高德地图在打造基于DT+AI和全面上云架构下的新一代出行生活服务平 ...

  3. Android两级导航菜单栏的实现--FragmentTabHost结合ViewPager与Android 开源项目PagerSlidingTabStrip

    http://www.cnblogs.com/aademeng/articles/6119737.html 转载注:简单总结一下,外层Tab用TabHost,类层Tab用Viepager+Framen ...

  4. jQuery-二级导航

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

  5. 防刷新jq左侧滚动条导航展示

    html代码: <div class="fangchan_navcont">        <div class="fangchan_nav" ...

  6. 用jq动态给导航菜单添加active

    点击后页面跳转到了新的链接,找到所有的li下的a标签,对其链接地址进行判断,如果和当前浏览器的地址一致,就认为是当前应该激活的菜单,添加active类,否则就取消. <ul class=&quo ...

  7. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

  8. 简洁的jQuery cxMenu 手风琴导航

    版本: jQuery v1.7+ jQuery cxMenu v1.2 注意事项: 自动判断是否有子导航,有则显示并不触发链接,无则触发链接. 实例预览 使用方法 载入 JavaScript 文件 & ...

  9. SharePoint 2010顶部链接导航栏的详细操作

    转:http://www.360sps.com/Item/UseTopLink.aspx 在SharePoint 2010环境的页面中,导航链接总体上可以分为两类,一类是显示在左侧的快速启动栏,另一类 ...

随机推荐

  1. BitMap - leetcode [位运算]

    136. Single Number 因为A XOR A = 0,且XOR运算是可交换的,于是,对于实例{2,1,4,5,2,4,1}就会有这样的结果: (2^1^4^5^2^4^1) => ( ...

  2. Openjudge-NOI题库-蛇形填充数组

    题目描述 Description 用数字1,2,3,4,...,n*n这n2个数蛇形填充规模为n*n的方阵. 蛇形填充方法为: 对于每一条左下-右上的斜线,从左上到右下依次编号1,2,...,2n-1 ...

  3. Zookeeper单机版安装(CentOS 7环境下)

    一.环境操作系统和软件版本介绍 1.环境操作系统为CentOS Linux release 7.2.1511 (Core) 可用cat /etc/redhat-release查询 2.软件版本 Zoo ...

  4. SEO之关键词选择

    在网站优化中,关键词应该是奠基石,选择好关键词的重要性也不言而喻了.怎样选择合理化的关键词呢?这个是我今天了解到的. 1.选择的关键词首先是有人搜索过的.没人搜索的词优化就是浪费时间. 2.做有效流量 ...

  5. 关于IIS和.NET 4.0的问题总结（转）

    注册asp.net 4.0 到iis   如果没有按照正常的先装iis后装.net的顺序,可以使用此命令重新注册一下 运行->cmd Microsoft Windows [版本 6.1.7601 ...

  6. 解决mac-osx10.11下无法安装wxPython2.8-osx-unicode-2.8.12.1的问题

    在mac-osx10.11版本下,安装RIDE前提需要装wxPython2.8-osx-unicode-2.8.12.1库,但在安装wxPython过程中,会提示安装失败,以下提供一种解决方案 这里我 ...

  7. react 学习与使用记录

    相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...

  8. 绿色版的mysql安装配置方式

    解压下载好的压缩包 copy 一份my-default.ini改名字为my.ini为mysql的配置文件 打开my.ini 修改配置文件 默认的原版文件为 # For advice on how to ...

  9. window的常用属性

    常用属性: 1.closed:用于判断一个指向window对象的引用是否已关闭.请看下面代码: var newWnd = window.open("NewURL.htm",&quo ...

  10. angular.js升序降序过滤器

    向指令添加过滤器 过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中. orderBy 过滤器根据表达式排列数组: 例如: <div ng-app="myApp" ng ...