使用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. Unity3D实现立体迷宫寻宝

    Unity3D实现立体迷宫寻宝 这个小游戏是一个白痴在一个昏暗的房间走动找到关键得分点,然后通关游戏.入门Unity3D做的第一款游戏,比较无聊,但实现了一般的游戏功能.如,人物控制,碰撞检测,主控制 ...

  2. C预处理，条件编译

    预处理是指在编译器之前运行,常以“#”开头 包含3个方面的内容: 1)宏定义与宏替换 2)文件包含 3)条件编译 宏定义与宏替换: 宏名一般大写,替换发生在编译之前,且是机械替换,不做语法检查,也不分 ...

  3. 【学习总结】iOS 数据保存几种方式总结

    在iOS开发过程中,不管是做什么应用,都会碰到数据保存的问题.将数据保存到本地,能够让程序的运行更加流畅,不会出现让人厌恶的菊花形状,使得用户体验更好.下面介绍一下数据保存的方式: NSKeyedAr ...

  4. linux 命令小结

    chkconfig --list  查询所有服务运行情况 修改文件夹权限: 在Linux中,权限的所有者分为用户权限,组权限和其他权限,分别是用字母u, g, o 代表权限分为:读 r , 写 w , ...

  5. hibernate中增加annotation @后不提示信息【转】

    此文转自:http://blog.knowsky.com/252047.htm 所需要用到的3个jar包分别是: hibernate-annotations.jar ejb3-persistence. ...

  6. Spring3+hibernate4+struts2整合的 过程中发生如下错误

    严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis ...

  7. [spring]启动时报错：NoSuchMethodError: javax.servlet.http.HttpServletResponse.getStatus()I

    Spring V4.1以后的版本在不支持Servlet3.0的应用服务器上跑时会报如下错误: NoSuchMethodError: javax.servlet.http.HttpServletResp ...

  8. 20160727noip模拟赛zld

    首先最优策略肯定是这样的:我们取出这个序列中的最大值,然后将整个序列分为左右两部分, 那么我们一定先把左右两部分合起来然后再与这个值合并 那么我们可以得出一个基于最值查询(rmq)的的算法,但是zld ...

  9. [转载]C#中的WebBrowser控件的使用

    http://www.cnblogs.com/txw1958/archive/2012/09/24/CSharp-WebBrowser.html

  10. MATLAB——PLOT绘图

    MATLAB——PLOT绘图 格式化绘图: 1.color: b g  r c m y k w blue green red  cyan magenta yellow black white 2.ty ...