<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
    .option:after{
        clear: both;
        content: '';
        display: block;
    }
    .option li{
        float: left;
        height:100px;
        width:200px;
        background-color: gray;
        margin-right: 50px;
    }
    ul,li{
        list-style: none;
    }

    .option li.on{
        background-color: orange;
    }

    .con1{
        width:500px;
        height:100px;
        background-color: yellowgreen;
        position: relative;
    }
    .con1 .con1-li{
        width:500px;
        height:100px;
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
    .con1 .con1-li.on{
        z-index: 1;
        opacity: 1;
    }
    .con2 li{
        background-color: red;
        margin:5px 0;
    }
    .con2 li.on{
        background-color: pink;
    }
    .con3{
        height:100px;
        width:500px;
        background-color: #00a0e9;
        position: relative;
    }
    .con3 li{
        height:100px;
        width:500px;
        position: absolute;
        z-index: -1;
        opacity: 0;
    }
    .con3 li.on{
        z-index: 1;
        opacity: 1;
    }
</style>
<body>

    <ul class="option">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <!--一级分类-->
    <div class="con1">
        <div class="con1-li on">
            <ul class="con2">
                <li class="on">1-1</li>
                <li>1-2</li>
                <li>1-3</li>
            </ul>

            <ul class="con3">
                <li class="on">1-1-value</li>
                <li>1-2-value</li>
                <li>1-3-value</li>
            </ul>
        </div>

        <div class="con1-li">
            <ul class="con2">
                <li class="on">2-1</li>
                <li>2-2</li>
                <li>2-3</li>
            </ul>

            <ul class="con3">
                <li class="on">2-1-value</li>
                <li>2-2-value</li>
                <li>2-3-value</li>
            </ul>
        </div>

        <div class="con1-li">
            <ul class="con2">
                <li class="on">3-1</li>
                <li>3-2</li>
                <li>3-3</li>
            </ul>

            <ul class="con3">
                <li class="on">3-1-value</li>
                <li>3-2-value</li>
                <li>3-3-value</li>
            </ul>
        </div>
    </div>

    <script>
        $(function(){
            $(".option li").hover(function(){
                $(".option li").removeClass("on");
                $(this).addClass("on");

                //
                var the_index = $(".option li").index(this);

                $(".con1 .con1-li").removeClass('on');
                $(".con1 .con1-li").eq(the_index).addClass('on');
            },function(){

            });

            $(".con2 li").hover(function(){
                $(this).parent().children('li').removeClass("on");
                $(this).addClass("on");

                var the_index = $(this).parent().children('li').index(this);
                console.log(the_index);
                $(this).parent().next().children('li').removeClass('on');
                $(this).parent().next().children('li').eq(the_index).addClass('on');
            },function(){

            });
        });
    </script>
</body>
</html>


 




												


											
css的多级分类的更多相关文章
	

    
								
  1. Hexo主题实现多级分类显示
		
    前言 最近在搞一个博客,是托管在github和gitcafe上的,利用Hexo生成的.之后,发现一个问题,显示的分类都是一级的.而我想要的是:能显示多级分类,层次分明`的那样. 问题 基本主题自带的分 ...
    
		
    2. 
						
  2. EXCEL中多级分类汇总空白字段填充
		
    使用场景,多级分类汇总后,在汇总的字段中显示空白,这样对我们直接取值做表带来十分不更(假像有5000条记录,1000条汇总项) 相关技术,INDIRECT函数,单元格定位功能. 在数据区域外任意一个单 ...
    
		
    3. 
						
  3. （转）smarty实现多级分类的方法
		
    --http://www.aspku.com/kaifa/php/44679.html 这篇文章主要介绍了smarty实现多级分类的方法,涉及循环读取的技巧,非常具有实用价值,需要的朋友可以参考下   ...
    
		
    4. 
						
  4. Android：实现仿 美团/淘宝 多级分类菜单效果
		
    本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图:      主要代码: 1. PopupWin ...
    
		
    5. 
						
  5. SQLite中使用CTE巧解多级分类的级联查询
		
    在最近的项目中使用ActiveReports报表设计器设计一个报表模板时,遇到一个多级分类的难题:需要将某个部门所有销售及下属部门的销售金额汇总,因为下属级别的层次不确定,所以靠拼接子查询的方式显然是 ...
    
		
    6. 
						
  6. 第一章入门篇CSS样式的分类、盒模型
		
    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...
    
		
    7. 
						
  7. 【3-24】css样式表分类、选择器、样式属性
		
    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...
    
		
    8. 
						
  8. magento简化url多级分类去掉父目录
		
    在Magento模板开发中,有时候需要将多级分类的url简化,Magento的URL默认是显示多级分类的http://afish.cnblogs.com/分类1/分类2/分类3现在需要简化为:分类2的 ...
    
		
    9. 
						
  9. css选择器的分类及优先级计算方法总结
		
    首先声明一下CSS三大特性—— 继承. 优先级和层叠.继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. openssl 生成免费证书
			
    原文链接:https://www.cnblogs.com/tugenhua0707/p/10927722.html 一:什么是openssl? 它的作用是?应用场景是什么? 即百度百科说:openss ...
    
			
    2. 
						
  2. SpringBoot整合WEB开发--（十）配置AOP
			
    简介: SpringBoot框架中对AOP有很好的支持,简单AOP概念: JoinPoint(连接点):类里面可以被增强的方法即为连接点,例如,想修改哪个方法的功能,那么该方法就是一个连接点. Poi ...
    
			
    3. 
						
  3. Ubuntu系统测评
			
    首次使用ubuntun系统 华为云可以免费试用30天,嘻嘻,正好熟悉一下linux命令 1.登录 login: 先输入用户名:root 在输入密码:******** 这个是在配置云服务器的时候自己设置 ...
    
			
    4. 
						
  4. CVE-2019-9081:laravel框架序列化RCE复现分析
			
    这里贴上两篇大佬的分析的帖子 本人习惯把平常的一些笔记或者好的帖子记录在自己的博客当中,便于之后遇到同样的漏洞时快速打开思路 1.https://xz.aliyun.com/t/5510#toc-8  ...
    
			
    5. 
						
  5. java面试记录一：跳表、判断二叉树相同、冒泡排序、cookie和session的区别、设计模式（单例、工厂、模板方法、原型、代理、策略）、抽象类与接口的区别
			
    1.什么是跳表? 跳表实际上就是多层链表 跳表可用在让链表的元素查询接近线性时间 代码结构及java实现参考博客园随笔 2.判断两棵二叉树是否相同?(结构相同,内容相同) 思路:(1)先定义树节点Tr ...
    
			
    6. 
						
  6. layedit不可编辑，按钮不能使用
			
    $("#LAY_layedit_1").contents().find("body[contenteditable]").prop("contente ...
    
			
    7. 
						
  7. H3C虚拟化技术
			
    一.IRF简单介绍 IRF(Intelligent Resilient Framework,智能弹性架构)是H3C自主研发的软件虚拟化技术.它的核心思想是将多台设备连接在一起,进行必要的配置后,虚拟化 ...
    
			
    8. 
						
  8. linux 安装 Django
			
    安装django的命令 pip install Django ## 这样运行默认安装的是最新版 备注 根据测试在python3.4基础上安装Django 1.8.9正式版是没有问题的,所以要执行下面命 ...
    
			
    9. 
						
  9. 18家大厂Java面试题整理了350道（分布式+微服务+高并发）
			
    一.性能调优系列 1.Tomcat性能调优 JVM参数调优: -Xms 表示JVM初始化堆的大小, -Xmx表示JVM堆的最大值.这两个值的大小一般根据需要进行设置. 当应用程序需要的内存超出堆的最大 ...
    
			
    10. 
						
  10. 番外：Oracle 中关于 Control File 的备份说明
			
    番外系列说明:该系列所有文章都将作为独立篇章进行知识点讲解,是对其他系列博文进行的补充说明,来自于博客园AskScuti. 主题:关于 Control File 控制文件备份的说明 内容预览:本篇涉及 ...
    
			
    11.