<!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++中的IO类(iostream, fstream, stringstream)小结（转）
			
    原文地址:https://blog.csdn.net/stpeace/article/details/44763009
    
			
    2. 
						
  2. Blue Jeans[poj3080]题解
			
    题目 Description - The Genographic Project is a research partnership between IBM and The National Geog ...
    
			
    3. 
						
  3. selenium--find_element_by_xpath()方法汇总
			
    一.从根目录/开始 有点像Linux的文件查看,/代表根目录,一级一级的查找,直接子节点,相当于css_selector中的>号/html/body/div/p 二.根据元素属性选择: 查找具体 ...
    
			
    4. 
						
  4. Java_Day4(下)
			
    Java learning_Day4(下) 本人学习视频用的是马士兵的,也在这里献上 <链接:https://pan.baidu.com/s/1qKNGJNh0GgvlJnitTJGqgA> ...
    
			
    5. 
						
  5. 搜索字母a或A
			
    Amy觉得英语课实在是无聊至极,他不喜欢听老师讲课. 但是闲着也是闲着,不如做点什么吧?于是他开始数英语书里的字母a和A共出现了多少次. 费了九牛二虎之力终于数完了. 作为一名软件工程专业大学生,他觉 ...
    
			
    6. 
						
  6. SVM-支持向量机（二）非线性SVM分类
			
    非线性SVM分类 尽管SVM分类器非常高效,并且在很多场景下都非常实用.但是很多数据集并不是可以线性可分的.一个处理非线性数据集的方法是增加更多的特征,例如多项式特征.在某些情况下,这样可以让数据集变 ...
    
			
    7. 
						
  7. 安装 centos8.1
			
    阿里云镜像下载链接 http://mirrors.aliyun.com/centos/8.1.1911/isos/x86_64/ 选择 CentOS-8.1.1911-x86_64-dvd1.iso  ...
    
			
    8. 
						
  8. vue使用饿了么element-ui框架中的上传组件进度条无法使用，:on-progress钩子无法触发的原因
			
    自己写的例子都是好好的,调试了半天,在项目里怎么都出不来 最终终于找到原因: 在上传文件时要做进度显示需要用到xhr.upload.onprogress事件,此时如果你的项目里用到mock.js模拟数 ...
    
			
    9. 
						
  9. Unity3D制作3D虚拟漫游场景（二）
			
    传送门: Unity3D制作3D虚拟漫游场景(一) -------------------------------------------------------------------------- ...
    
			
    10. 
						
  10. Win10  JDK 环境变量配置
			
    1.安装JDK 到指定的目录 2.配置环境变量 2.1   配置 CLASSPATH    .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; 2. ...
    
			
    11.