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

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

　　

css实现缩进无限嵌套的更多相关文章

  1. 纯css实现无限嵌套菜单

    效果图: demo:关键的地方都以颜色明显标识 <!DOCTYPE html> <html> <head> <title>menu</title& ...

  2. CSS 文本缩进，行间距

    文本缩进:text-indent:2.0em; 行间距:line-height:1.5em;

  3. css换行缩进

    1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> ...

  4. Mysql 层级无限嵌套

    1.新建测试数据 新建channel表 DROP TABLE IF EXISTS channel; CREATE TABLE channel ( id INT(11) NOT NULL AUTO_IN ...

  5. css 之 文本缩进属性(text-indent)

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 文本缩进属性(text-indent) 这个属性设定文本 ...

  6. CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？

    最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...

  7. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  8. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  9. css各兼容应该注意的问题

    1.div布局在ie浏览器和chrome浏览器,firefox浏览器不同,不如在div里面嵌套3个div,分别左中右,左边div的pading和margin在ie8以上都是几乎相同,ie8以下做内边距 ...

随机推荐

  1. javascript之流程控制 和函数的容易忽略点

    1.流程控制 1> for in  仅用于 对象的遍历: var box={ "name":'小红', 'age':18, 'height':165 }; for(var b ...

  2. linux-CentOS6.4下安装oracle11g详解

    参考地址:http://dengqsintyt.iteye.com/blog/1991930

  3. html+css学习笔记 2[标签]

    img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:    ...

  4. 3244: [Noi2013]树的计数 - BZOJ

    Description 我们知道一棵有根树可以进行深度优先遍历(DFS)以及广度优先遍历(BFS)来生成这棵树的DFS序以及BFS序.两棵不同的树的DFS序有可能相同,并且它们的BFS序也有可能相同, ...

  5. sysconf和pathconf使用

    问题描述:          查看系统运行时的限制值 问题解决: 执行效果: 源代码:

  6. log4j安装与简介

    问题描述:     在应用程序中添加日志记录总的来说基于三个目的:    (1) 监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析工作:     (2) 跟踪代码运行时轨迹,作为日 ...

  7. [CF]codeforces round 369(div2)

    *明早起来再贴代码 A [题意] 给定n*5的方格 将横向的相邻两个变成+输出 [题解] ... B [题意] 一个n*n的正整数矩阵,有且仅有一个数为0 ,在这个位置填上一个数,使得每一列的和 每一 ...

  8. Restore IP Addresses

    Given a string containing only digits, restore it by returning all possible valid IP address combina ...

  9. 6.5 THUSC 考试题解

    QAQ 由于并没有数据,而且没有A掉的是提交答案题目,所以并没有修改 QAQ 只能放题解了,代码还没有拿到,不过在清华听了一波习题讲评的安利 第一题 成绩单 先说暴力分 对于单调序列来说最优决策一定是 ...

  10. lintcode：Valid Sudoku 判断数独是否合法

    题目: 判断数独是否合法 请判定一个数独是否有效.该数独可能只填充了部分数字,其中缺少的数字用 . 表示. 样例 下列就是一个合法数独的样例. 注意 一个合法的数独(仅部分填充)并不一定是可解的.我们 ...