css实现缩进无限嵌套

使用css实现缩进带背景无限嵌套,支持Ie6,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
*{margin:0;padding:0;}
li{list-style:none;}
.box{width:300px;height:400px;border:2px solid #ccc;margin:10px;position:relative;}
.box li{padding-left:15px;line-height:20px;}
.box a{display:block;}
.box .bg{position:absolute;z-index:-1;left:0;width:300px;height:20px;background:#ccc;opacity:0;filter:alpha(opacity=0);}
.box a:hover .bg{opacity:1;filter:alpha(opacity=100);}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <a href="#"><span class="bg"></span>12</a>
                <ul>
                    <li>
                        <a href="#"><span class="bg"></span>12</a>
                        <ul>
                            <li>
                                <a href="#"><span class="bg"></span>12</a>
                                <ul>
                                    <li><a href="#"><span class="bg"></span>12</a></li>
                                    <li><a href="#"><span class="bg"></span>12</a></li>
                                </ul>
                            </li>
                            <li><a href="#"><span class="bg"></span>12</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

  

posted @   破男孩  阅读(1177)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示