<!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++中public、protected、private的区别（转载）
			
    转载:https://blog.csdn.net/vanturman/article/details/79393317   首先记住一点:派生类能且只能访问基类的public和protected成员! ...
    
			
    2. 
						
  2. react-父子子孙组件嵌套-context
			
    方案一 import React from 'react' import ReactTypes from 'prop-types' /* // 最外层的父组件 export default class ...
    
			
    3. 
						
  3. python开发第一篇：初识python
			
    一. Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为AB ...
    
			
    4. 
						
  4. 一个简单的java web项目 仅实现添加
			
    连接数据库已经进行判断 要求: 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求显示“• ”或“*”表示输入位数,密码要求八位以上字母.数字组成.(1分 ...
    
			
    5. 
						
  5. PIE-SDK For C++栅格数据的金字塔创建
			
    1．功能简介 金字塔可用于改善性能,可以加快栅格数据的显示速度.随着放大操作的进行,各个更精细的分辨率等级将逐渐得到绘制;但性能将保持不变:目前PIE SDK支持栅格数据的金字塔创建,下面对栅格数据格 ...
    
			
    6. 
						
  6. 机器学习作业（四）神经网络参数的拟合——Matlab实现
			
    题目下载[传送门] 题目简述:识别图片中的数字,训练该模型,求参数θ. 第1步:读取数据文件: %% Setup the parameters you will use for this exerci ...
    
			
    7. 
						
  7. Wannafly Camp 2020 Day 2J 邦邦的2-SAT模板
			
    #include <bits/stdc++.h> using namespace std; int main() { int n; cin>>n; cout<<n& ...
    
			
    8. 
						
  8. jQuery里ready方法用原生js实现原理
			
    function ready(fn){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMContentLoad ...
    
			
    9. 
						
  9. 为什么要使用NoSQL数据库
			
    NoSQL概念 随着web2.0的快速发展,非关系型.分布式数据存储得到了快速的发展,它们不保证关系数据的ACID特性(原子性.一致性.隔离性.持久性,一个支持事务的数据库,必需要具有这四种特性,否则 ...
    
			
    10. 
						
  10. main中的argv和argc
			
    int main(int argc,char* argv[]) 给程序传递命令行参数:第一个参数的值是第二个参数的数组元素个数,即统计运行程序时送给main函数的命令行参数个数. 第二个参数总是cha ...
    
			
    11.