<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> xx </title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style>
#linNav{position:absolute;z-index:1000;}
#linNav ul,li{padding:0;margin:0;}
#linNav ul li{float:left;margin-right:1px; display:inline;list-style:none;text-align:center;width:45px;font-size:12px;}

#linNav ul li ul li{float:none;display:block;position:relative;}
#linNav ul li ul{display:none;}
#linNav ul a{line-height:18px;height:18px;}

#linNav ul li ul li .aaa{position:absolute;left:45px;top:0;}
#linNav ul li ul li .aaa li{float:none;}
.bbb{background:#ffff00;}

</style>

<script src="js/jquery-1.7.1.min.js" /></script>

</head>

<body>
<div id="linNav">
<ul>
    <li><a href="">index</a></li>
    <li><a href="">栏目二</a>
        <ul>
            <li><a href="">子栏目1</a></li>
            <li><a href="">子栏目2</a>
                <ul class="aaa">
                    <li><a href="">子栏目3</a></li>
                    <li><a href="">子栏目3</a>
                    
            
                <ul class="aaa">
                    <li><a href="">子栏目3</a></li>
                    <li><a href="">子栏目3</a>
                    
                    
                    </li>
                </ul>

</li>
                    <li><a href="">子栏目3</a>
                    </li>
                </ul>
            </li>
        
        </ul>
    </li>
</ul>
<br style="clear:both;" />
</div>

<br />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<script>
$(document).ready(function(){
$("ul li").hover(function(){

$(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示；
},function(){
$(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul；
})
$("ul li ul li ul").prev().addClass("bbb");//给li下面ul是aaa的样式的前一个同辈元素添加css；
})
</script>
</body>
</html>

jquery 多级无限分类的更多相关文章

  1. laravel-nestedset：多级无限分类正确姿势

    laravel-nestedset:多级无限分类正确姿势   laravel-nestedset是一个关系型数据库遍历树的larvel4-5的插件包 目录: Nested Sets Model简介 安 ...

  2. 后台树状菜单，js实现递归无限分类

    //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...

  3. MySql无限分类数据结构--预排序遍历树算法

    MySql无限分类数据结构--预排序遍历树算法 无限分类是我们开发中非常常见的应用,像论坛的的版块,CMS的类别,应用的地方特别多. 我们最常见最简单的方法就是在MySql里ID ,parentID, ...

  4. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  5. jQuery实现无限加载瀑布流特效

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

  6. TreeView递归绑定无限分类数据

    TreeView递归绑定无限分类数据 实现一个动态绑定,无限级分类数据时,需要将数据绑定到TreeView控件,分类表的结构是这样的: 字段 类型 Id int ParentId int Name N ...

  7. 关于无限分类的树状输出(id,name,pid)类型的

    首先创建无限分类的数据表,我这里采用的是id.name.pid这种类型(当然还有很多种无限分类的方式了,比如:id.name.pid.path.left.right左右节点的形式) CREATE TA ...

  8. php递归方法实现无限分类实例

    数组:  代码如下 复制代码 $items = array( array('id' => 1, 'pid' => 0, 'name' => '一级11' ), array('id' ...

  9. PHP+Mysql无限分类的方法汇总

    无限分类是个老话题了,来看看PHP结合Mysql如何实现.第一种方法这种方法是很常见.很传统的一种,先看表结构表:categoryid int 主键,自增name varchar 分类名称pid in ...

随机推荐

  1. ios真机调试详细步骤

    •真机调试的主要步骤 1.登录开发者主页 2.生成cer证书:cer是一个跟电脑相关联的证书文件,让电脑具备真机调试的功能 3.添加App ID:调试哪些app? 4.注册真机设备:哪台设备需要做真机 ...

  2. Java字节转换类实现

    Java的类库支持完全不如C#,比如时间类,比如数据类型转换类等等,难道是我自己没找到吗? 下面是字节转换类,byte[]与short, int, long, float, double, Strin ...

  3. oracl使用DataBase Configuration Assistant创建、删除数据库

    原文:oracl使用DataBase Configuration Assistant创建.删除数据库 可以使用DataBase Configuration Assistant来创建一个心得数据库.Da ...

  4. Cocos2d-x 2.0 自适应多种分辨率

    转自:http://dualface.github.io/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/ cocos2d-x 2.0 提供一个极 ...

  5. jQuery 编辑div内容

    div显示如下 <div id="showResult"></div> div中添加的html,进行拼接 $("#showResult" ...

  6. css z-index详解

    写css z-index的时候经常会出现很多莫名其妙的问题,下面对z-index属性做彻底的剖析,本文参考了<一个css中z-index的用法>,并做了很多demo,方便了解z-index ...

  7. select组件2

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

  8. linux安全加固

    1 . BIOS 你应该总是在系统启动的时候设置一个BIOS 密码和禁用从CD-ROM 和软盘引导,这将可以防止一些人未经允许访问你的系统和更改BIOS 设置 2 .sshd 服务 SSH 是一个协议 ...

  9. Android环境变量笔记

    Logcat打印日志 使用方法Log.i(tag, msg);参数tag: 标签.用于识别Logcat的分类(一般可以使用类名作为标签)数msg: 打印的内容 在eclipse中打开logcat标签W ...

  10. oracle EBS 基于Host并发程序的开发(转)

    参考此编文章 http://www.doc88.com/p-0972680953307.html http://www.cnblogs.com/benio/archive/2011/06/10/207 ...