JQ N级导航
2016-02-15 11:19
375 查看
<!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>
<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>
相关文章推荐
- Linq NOT IN (或 NOT EXISTS)、LEFT JOIN踩坑记
- JAVA反射机制的应用场景
- windows和linux监听端口数据的方法
- linux学习笔记六:加载USB移动硬盘(NTFS格式)
- linux调试工具gdb初步学习
- HTML5与php实现消息推送功能
- mass的domReady方案
- 计算几何
- YUM常用命令介绍
- linux学习笔记五:加载U盘
- chomp用法
- UncaughtException处理类,当程序发生Uncaught异常的时候,由该类来接管程序,并记录发送错误报告.
- 带角标的ImageView
- XCTest 测试实战
- 我最常用的几个Xcode快键键
- 【BZOJ2814】tree
- iOS 【KVC的拓展-key&keyPath区别/修改私有属性/取值/数组求和&平均值】
- 记录自己的码农进军之路
- RxJava系列之二:RxJava简介
- linux学习笔记四:安装lsusb