使用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. POJ 3321 DFS序+线段树

    单点修改树中某个节点,查询子树的性质.DFS序 子树序列一定在父节点的DFS序列之内,所以可以用线段树维护. 1: /* 2: DFS序 +线段树 3: */ 4:   5: #include < ...

  2. MVC 使用 FluentScheduler 定时器计划任务

    MVC 使用 FluentScheduler 定时器计划任务 MacBook Pro 只有四个 USB Type-C 接口是否错了? 一项新技术的诞生总会对已存在的事物造成冲击或影响,如果大家都害怕冲 ...

  3. BLOB或TEXT字段使用散列值和前缀索引优化提高查询速度

    1.创建表,存储引擎为myisam,对大文本字段blob使用MD5函数建立一个散列值 create table t2(id varchar(60), content blob, hash_value ...

  4. .NET4安装总进度一直不动的解决办法

    在安装.NET4时遇到上面的进度在动,而安装进度一直停在0,解决办法: 禁止并关闭Window Update服务,重新运行安装程序. 关闭服务:控制面板->管理工具->服务->Win ...

  5. oracle将两个结果连接后进行查询，得到两个查询的联合结果

    一.需求 用户答题,共3道,必须3题都答完才能提交. 目的:要查询用户答对了几题,答错了几题.(当然此处可以只查答对的题目数,用3减即得答错题的题目数) 二.sql select * ) rightC ...

  6. dll 入口函数

    http://support.microsoft.com/kb/815065/zh-cn // SampleDLL.cpp // #include "stdafx.h" #defi ...

  7. 140227项目开发及上线过程遇到的10个问题(重点: FCK过滤替换)

    1.替换条件判断问题 String s = (String)map2.get("contentIntro"); if(s != null && s.length() ...

  8. pl/sql tutorial

    http://plsql-tutorial.com/plsql-procedures.htm What is PL/SQL? PL/SQL stands for Procedural Language ...

  9. Spring @ Component 的作用

    1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访问) 4.@component (把普通pojo实例化到spr ...

  10. HDU4612 Warm up 边双连通分量&&桥&&树直径

    题目的意思很简单,给你一个已经连通的无向图,我们知道,图上不同的边连通分量之间有一定数量的桥,题目要求的就是要你再在这个图上加一条边,使得图的桥数目减到最少. 首先要做的就是找出桥,以及每个点所各自代 ...