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

<!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>

　　

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. 打造自己的程序员品牌（摘自Infoq）

    John Sonmez是Simple Programmer的创始人.作者与程序员,关注于如何让复杂的事情变得简单.他是一位专业的软件开发者.架构师与讲师,感兴趣的领域包括测试驱动开发.如何编写整洁的代 ...

  2. adb shell出现error错误

    模拟器已打开,原因在于端口被占用. 找到kadb.exe 进程,结束进程!

  3. ubuntu下修改ip重启系统ip不变

    今天同学问我ubuntu下ip如何写死,我想起这周在公司我们队长也问过我,我就在这把我实验的方法说一下. 打开终端: sudo vim /etc/network/interfaces 然后按如下修改: ...

  4. 1084: [SCOI2005]最大子矩阵 - BZOJ

    Description 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. Input 第一行为n,m,k(1≤n≤100,1≤m≤2 ...

  5. Netty 中文教程 Hello World ！详解

    1.HelloServer 详解 HelloServer首先定义了一个静态终态的变量---服务端绑定端口7878.至于为什么是这个7878端口,纯粹是笔者个人喜好.大家可以按照自己的习惯选择端口.当然 ...

  6. PHP中应用Service Locator服务定位及单例模式

    单例模式将一个对象实例化后,放在静态变量中,供程序调用. 服务定位(ServiceLocator)就是对象工场Factory,调用者对象直接调用Service Locator,与被调用对象减轻了依赖关 ...

  7. Matlab中sort函数的使用

    主要看大神们如何使用,先模仿. [~,y] = sort(v),如果v是向量,那么y返回的是v中的下标(不好表达),看下面的,发现y是是下标,对应的是c中元素*(由小到大排序).使用c(y)就得到了由 ...

  8. vs-ps combination error

    http://social.msdn.microsoft.com/Forums/en-US/5dfef3d9-edc1-4006-9e81-9d5326419df8/d3d10effect-compi ...

  9. Introduction To Monte Carlo Methods

    Introduction To Monte Carlo Methods I’m going to keep this tutorial light on math, because the goal ...

  10. unit3d 4.6 document open solution

    发现4.6 的 本地 文档字体解析采用 fonts.googleapis.com ,可是google 自古就与天朝不在一个鼻孔,所以你打开往往需要半天. 网上查了一下,把所有本地的*.html 文档  ...