<!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. C++-POJ3233-Matrix Power Series[矩阵乘法][快速幂]
			
    构造矩阵 #include <cstdio> ; struct Matrix{int a[MAXN][MAXN];}O,I;int N; ;i<MAXN;i++);j<MAXN ...
    
			
    2. 
						
  2. ZDialog关闭父窗口、往父窗口传值、刷新父窗口
			
    关闭自己 //关闭自己 top.Dialog.close(); 关闭父窗口 //关闭父窗口 parentDialog.parentWindow.close() 往父窗口传值 //在本页面,调用父页面方 ...
    
			
    3. 
						
  3. Python之路Day09
			
    函数 将某个功能封装到一个空间中就是一个函数 减少重复代码 函数体中存放的时代码 定义函数 def len(): def 关键字 len 函数名 -- 变量名 ()格式规定 :语句结束 调用函数 函数 ...
    
			
    4. 
						
  4. mycat linux上目录介绍
			
    1.本文引用来自mycat官方文档,具体可以浏览mycat官网 2.linux系统下面的目录 MyCAT 有提供编译好的安装包,支持 windows.Linux.Mac.Solaris 等系统上安装与 ...
    
			
    5. 
						
  5. Oracle监听出现的问题总结，以及解决办法
			
    包括的错误类型: 1.ORA-12541: TNS: 无监听程序 2. ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务 3.ORA-12560: TNS: 协议适配器错误  ...
    
			
    6. 
						
  6. STL初学
			
    标准模板库STL初学 线性数据结构 vector 一维向量,相当于数组 list 链表 map 映射,提供(Key,Value)式操作,相当于哈希表 string char字符串 queue 队列,先 ...
    
			
    7. 
						
  7. logistic回归损失函数（非常重要，深入理解）
			
    2.2 logistic回归损失函数(非常重要,深入理解) 上一节当中,为了能够训练logistic回归模型的参数w和b,需要定义一个成本函数 使用logistic回归训练的成本函数 为了让模型通过学 ...
    
			
    8. 
						
  8. 回顾 Monty Hall （三门问题）
			
    一.问题描述 Monty Hall Problem 源于美国的一档电视节目<Let's Make a Deal>,其中Monty Hall 是这个节目的主持人. 节目中有三扇门1.2.3, ...
    
			
    9. 
						
  9. pytest学习4-fixtures
			
    源码注释: def fixture(scope="function", params=None, autouse=False, ids=None, name=None): &quo ...
    
			
    10. 
						
  10. 己亥清爽恢复系列之数据文件4篇：DROP表后如何恢复（非闪回技术）
			
    己亥清爽系列说明:清爽系列是作为恢复系列的基础篇,基于FS(File System)文件系统的手工还原恢复,也叫基于用户管理的还原恢复,来自于博客园AskScuti. 实验说明:你不小心Drop掉了一 ...
    
			
    11.