css实现缩进无限嵌套
使用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实现缩进无限嵌套的更多相关文章
- 纯css实现无限嵌套菜单
效果图: demo:关键的地方都以颜色明显标识 <!DOCTYPE html> <html> <head> <title>menu</title& ...
- CSS 文本缩进,行间距
文本缩进:text-indent:2.0em; 行间距:line-height:1.5em;
- css换行缩进
1.换行缩进 <div id="alertiframe"> <span id="closeiframe">×</span> ...
- Mysql 层级无限嵌套
1.新建测试数据 新建channel表 DROP TABLE IF EXISTS channel; CREATE TABLE channel ( id INT(11) NOT NULL AUTO_IN ...
- css 之 文本缩进属性(text-indent)
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 文本缩进属性(text-indent) 这个属性设定文本 ...
- CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?
最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- css各兼容应该注意的问题
1.div布局在ie浏览器和chrome浏览器,firefox浏览器不同,不如在div里面嵌套3个div,分别左中右,左边div的pading和margin在ie8以上都是几乎相同,ie8以下做内边距 ...
随机推荐
- 十二、BOOL冒泡
int main(){ int a[5] = {5,2,3,4,1}; //需要一个可以告诉我们没有交换的东西 //YES:交换 //NO:未交换 ...
- get的四种请求形式
$_GET变量当用户以get方式请求页面并发送数据的时候,$_GET变量就存储了这些数据——get数据!get请求有4种形式:形式1:<form action=”abc.php” meth ...
- hbase meta表修复
meta表修复一 查看hbasemeta情况hbase hbck1.重新修复hbase meta表(根据hdfs上的regioninfo文件,生成meta表)hbase hbck -fixMeta2. ...
- C#中的委托与事件 笔记
1.委托是类型安全的回调函数,是将方法作为方法参数.委托可以注册多个方法:委托就是一个 multicastdelegate类,可以通过=赋值,+=添加方法(对象方法与静态方法),内部使用Delega ...
- 来吧,给你的Winform列表控件画个妆
前言 以前看别人的控件好看只有羡慕的份:以前觉得控件重绘是个很复杂的东西:以前知道MSDN很全面很专业却一直没有好好用起来: 作为初级程序猿,不能原地踏步,来吧,让我们一起把 TreeView 美化一 ...
- AngularJs遇到的小坑与技巧
1. templateURL和路由之类的要在web server下运行. 2. 使用模板replace设为true,模板里也要有相应的标签,否则不出现任何数据. 3. 1.2版本之后,ngRoute模 ...
- ViewController 优化
解决问题:部分复杂页面的Controller过于庞大,不利于维护与复用: 复杂的页面大多是基于tableview的页面.复杂页面的代码大致可分为两部分(复杂的View布局用Nib实现的话,一般大家都是 ...
- 详解HTML5中的<aside>元素与<article>元素
<aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...
- VB程序破解之API断点[bp __vbaVarTstEq]
软件名称:风云足彩1.7软件大小:2.1M下载地址:http://free.ys168.com/?zhinengxuanhao软件保护:注册码编写软件:Microsoft Visual Basic 5 ...
- _beginthreadex创建多线程详解
一.需要的头文件支持 #include <process.h> // for _beginthread() 需要的设置:ProjectSetting-->C/C++- ...