蜗爱CSS - CSS布局实例

超漂亮的多层树形下拉菜单css+div

wo-ai-niqq@163.com(woniu) — Thu,01 Jul 2010 10:10:15 +0800

蓝色上taotaoyx共享的一个树形菜单，很好看也很实用。

点击下载此文件

来自：http://bbs.blueidea.com/thread-2954778-1-1.html

CSS三列等高布局

wo-ai-niqq@163.com(woniu) — Thu,28 Jan 2010 16:34:49 +0800

最近逛蓝色，又看到很多对三列等高布局的讨论，迅雷的面试题又被翻了出来，腾讯的内部试题也有对三列等高的考核。纯css，不使用图片、脚本、CSS hacks并在最严格的XHTML 规范中都能通过验证的三列等高布局实现起来并不容易。看到一篇Ruby's Louvre翻译自Matthew James Taylor的文章能达到上面的要求。

----------------------------------------------
翻译自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks，有些部分根据我的理解改了，让一些初心者更好理解。

利用纯CSS创建一个等高多列的布局并不件易事，本教程将着重分析出现在多列布局的多个问题，然后为大家等来一个简单全游览器通吃的解决方法，不使用图片，脚本，CSS hacks并在最严格的XHTML 规范中都能通过验证。

问题的症结所在

如上图所示，由于各列的内容不一致导致其背景的高度也不统一。而背景实质上是内容（标准的盒子模型是由内容区，补白区，边框区与边界区组成，背景存在于前三者中；IE为前两者）的自适应的问题。再转化一下，如何撑大那些较短的列的高度，让所有列的高度等于最高的列的高度？这个，的确很很棘手，因为我们不清楚各列的高度，也无从得知哪一列最高。我们也不能简单地给所有列一个明确的高度，这可能会导致所有列都多出一大片空白，或者很不亏由于高度不足导致某些列的内容无法全部显示出来！现实中，内容的长度是动态的，因此每列的高度也是动态的。我们必须意识到在网络中，不存在”固定“二字，每个人的显示器的分辩率都不尽一样，游览器的字体大小设置也不尽相同，这些都会影响到内容的显示高度。

对内容与背景实行分离

解决等高问题的第一步就是把它拆分为两个较小的，可以单独解决的部分。这样，我们原来是一列对应一个DIV，现在是一列对应一个DIV，一个用来装载内容，一个用来显示背景。这种分离有利于我们对各个元素的掌控和把它们用另一种更有效的方式组合起来，这引起我很快会在下面的章节讲述。

利用浮动嵌套解决最高列的高度的问题。

这是解决多列等高的关键。使一个DIV的高度等于最高列的高度的唯一方法就是让这个DIV包含所有的列。换句话说，通过把所有的列放在一个容器中，容器的高度就是最高列的高度。这是个非常有用的结构。

单行三列的布局的结构层代码。

 Example Source Code 

Column 1

Column 2

Column 3

对应的表现层代码。

 Example Source Code 

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

为了使用这种结构在所有游览器都正常工作，我们必须让外层容器往左或右浮动，并且其子元素包含每一栏内容的DIV也跟着浮动，哪一个方向都无所谓。浮动会使用它们往上对齐于外围容器的上补白，并且浮动的容器会自动调整自身的高度与宽度以实现对浮动子元素的包含。但是如果容器被定义了高度与宽度，则它不会随子元素的大小而自动调整自身显示区域来适应子元素的显示。但在IE6与低版本的IE中，子浮动元素能撑开外围元素；幸好IE7与IE8已引正了这个不符合标准的做法。

增加用来显示背景的容器

下一步是增加额外的容器，让它们彼此嵌套，并让所有外围的容器数（新增的加上原来的那一个）等于列的总数：3。这三个容器用来显示各列的背景。请注意，我们去掉了原来各列的背景，把它们移至这些容器上。

新的结构层代码，让新增的容器套在原来的外围容器上！

 Example Source Code 

Column 1

Column 2

Column 3

新的表现层代码，新增的容器都是浮动元素！

所有元素左浮动，将容器宽度设为100%，使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。注，原文是所有容器的宽都设为100%，其实根本没有这样的必须，因为在浮动嵌套中，外面的容器必须会被撑大能容得下内部子元素的大小！

 Example Source Code 

#container3 {
    float:left;
    /*width:100%;*/
    background:green;
}
#container2 {
    float:left;
    /*width:100%;*/
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

用相对定位来移动容器

现在是所有容器都完美地累在一起，只显示一种背景颜色，我们必须让其他背景也显示出来。为此我们就得利用相对定位来让这些容器像阶梯一样放置。这个本可以使用负边界技术，但该死的IE5.5的盒子模型与W3C的不一致，为了兼容我们就得使用到CSS hack。由于本文声明是不使用CSS hack，因此放弃。首先让#container2向右移到30%,由于#container2装着#container1，而#container1上装着那三个列，这样一来，最右边的列就被移出游览器的右边了。而最外围最底层的容器#container3则露出来了，露了左边的30%。然后我们再移动最上层的容器#container1，向右边移动40%，于是原来盖住的第二层容器也露出来了，露出其左边的40%,而#container1则只剩下100%-30%-40%=30%;上方的列也只剩下最右边的列，却表现为位于最左边。这样，背景也显示正常了！

对应的表现层代码

 Example Source Code 

#container3 {
    float:left;
    /*width:100%;*/
    /*没有必要的代码被注释掉！*/
    background:green;
}
#container2 {
    float:left;
    /*width:100%;*/
    /*没有必要的代码被注释掉！*/
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

把各列的内容移回原来的位置上

由于最上层的那三列都是被整体往右往到(页面的)70%，我们再把它们都往左移回70%就是！最后，由于我们前两个背景容器都是被向右移动，移出了游览器，它们都与游览器的右边连在一起，我们可以设置最底层的背景容器的overflow来隐藏那些被移出的部分。

 Example Source Code 

#container3 {
    float:left;
    /*width:100%;*/
    /*没有必要的代码被注释掉！*/
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    /*width:100%;*/
    /*没有必要的代码被注释掉！*/
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}
#col2 {
    float:left;
    width:40%;
    position:relative;
    left:70%;
}
#col3 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}

对列添加补白（内边距）

最后，我们对列增加补白，让每列显得大方一些，而不是密密麻麻地塞满一列。但是如果我们增加补白，可能有一些游览器的有病又犯了，在IE6和更低版本的IE中，其怪异的盒子模型，会产生一些我们不愿看到的结果。如，一个 200px 宽 20px 补白的 box 在 IE 中被视为 200px 宽，在其他浏览器中则为正确的 240px。补白应该加在元素的宽度上。

不过放心，我们可以用完全不依赖于 padding 的方法来解决这个问题。相反，我们把列弄窄一点（列宽减去两侧的补白），之后用相对定位把它们移至正确的位置。例如，我们用了 2% 的补白，则 30% 的列将减至 26%，40% 的列减至 36%。用相对定位移回列时需谨记，现在列变窄了，所以当它们一起像最初那样左浮动时，每一个需要比上一个移动更远的距离。

完整的CSS

为了使布局保持在小宽度我在每个内容列增加了overflow:hidden; 这将切去超出列宽的东东，并阻止其干扰其他布局。重申一下，这只是 IE 的问题，其他所有浏览器会保持正确的布局，不管列内是虾米。如果你真想这样做，可以用 IE 条件注释只对 IE 写规则。

 Example Source Code 

#container3 {
    float:left;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

原文：http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html

学习用，实际工作中我想没几人会用纯css来实现。

CSS圆角实例

wo-ai-niqq@163.com(woniu) — Tue,26 Jan 2010 14:11:44 +0800

不用图片实现圆角的方式很多，网上很多文章都有探讨。我写的这个最普通，兼容性很好，但是缺点不少：不够灵活，重用性不强，有锯齿，最要命的是有一堆无意义的标签。发出来大家看下效果和实现原理。

CSS

 Example Source Code 

* {
    margin:0;
    padding:0;
}
body {
    font-family:sans-serif, Verdana, Geneva;
    font-size:10px;
}
#box {
    width:253px;
    margin:10px auto;
}
#box .line0,.line1,.line2,.line3 {    /*圆角盒子的共有属性*/
    height:1px;
    background:#ebf5ff;
    overflow:hidden;                /*解决在IE6中不兼容的情况*/
    border-left:1px solid #cfe3f8;
    border-right:1px solid #cfe3f8;
}
#box .bg_none{
    background:none;
}

#box .line0 {
    margin: 0px 5px;
    background:#cfe3f8;
}
#box .line1 {
    margin: 0px 3px;
    border-left:2px solid #cfe3f8;
    border-right:2px solid #cfe3f8;
}
#box .line2 {
    margin: 0px 2px;
}
#box .line3 {
    margin: 0px 1px;
    height:2px;
}
#word {
    border:1px solid #cfe3f8;
    border-top:none;
    height:25px;
    text-align:center;
    background:#ebf5ff;
}
#box .content{
    border-left:1px solid #cfe3f8;
    border-right:1px solid #cfe3f8;
}

Xhtml

 Example Source Code 

在线贷款申请

        kkkk

        kkkk

        kkkk

        kkkk

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css制作圆角</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
body {
	font-family:sans-serif, Verdana, Geneva;
	font-size:10px;
}
#box {
	width:253px;
	margin:10px auto;
}
#box .line0,.line1,.line2,.line3 {	/*圆角盒子的共有属性*/
	height:1px;
	background:#ebf5ff;
	overflow:hidden;				/*解决在IE6中不兼容的情况*/
	border-left:1px solid #cfe3f8;
	border-right:1px solid #cfe3f8;
}
#box .bg_none{
	background:none;
}

#box .line0 {
	margin: 0px 5px;
	background:#cfe3f8;
}
#box .line1 {
	margin: 0px 3px;
	border-left:2px solid #cfe3f8;
	border-right:2px solid #cfe3f8;
}
#box .line2 {
	margin: 0px 2px;
}
#box .line3 {
	margin: 0px 1px;
	height:2px;
}
#word {
	border:1px solid #cfe3f8;
	border-top:none;
	height:25px;
	text-align:center;
	background:#ebf5ff;
}
#box .content{
	border-left:1px solid #cfe3f8;
	border-right:1px solid #cfe3f8;
}

</style>
</head>
<body>

<div id="box">
  <div class="line0"></div>
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  
	<div id="word">在线贷款申请</div>
	<div class="content">

kkkk</br>
		kkkk</br>
		kkkk</br>
		kkkk</br>

</div>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

ul li模拟圆角表格实例

wo-ai-niqq@163.com(woniu) — Thu,19 Nov 2009 22:44:23 +0800

这两天和表格纠结上了...工作需要做表格，但是不想重复相同的方法，前两天用dl dt dd，今天用ul li做个圆角表格，圆角用了背景图片。再次声明：数据输出型的表格不推荐使用div+css。测试浏览器：IE6\IE7\IE8\FF3.0\Opera 9.6

Demo

CSS

 Example Source Code 

                 *{
               margin:0px;
               padding:0px;
                   }
            body{
                text-align:center;
                font-family:"宋体"
                }
            #table{
                margin:0 auto;
                width:960px;
                text-align:left;
                }
            li{
                width:958;
                *width:100%;
                height:36px;
                line-height:36px;
                border:1px solid #c9dff7;
                border-bottom:none;
                list-style-type:none;
                vertical-align:bottom;
                }
            li.title{
                width:960px;
                height:34px;
                line-height:34px;
                background:url(title.gif);
                border:none;
                font-size:13px;
                font-weight:800;
                color:#fff;
                }
            li.title span{
                padding-left:20px;
                }
            li.bottom{
                width:960px;
                height:37px;
                background:url(end.gif);
                border:none;
                }
            li a{
                float:left;
                width:88px;
                *width:89px;
                height:36px;
                overflow:hidden;
                border-right:1px solid #c9dff7;
                }
            li a.left{
                float:left;
                width:67px;
                *width:68px;
                height:36px;
                overflow:hidden;
                background:#E3EFFC
                }
            li a.b_l{
                width:68px;
                *width:69px;
                background:none;
                }
            li a.right{
                border-right:none;
                }

XHTML

Example Source Code

蜗爱css--www.woaicss.com

转载注明出处！

dl dt dd模拟表格实例

wo-ai-niqq@163.com(woniu) — Tue,17 Nov 2009 11:20:38 +0800

div+css再牛*也无法完全取代table，很多时候还是需要用到表格，这里就不探讨孰优孰劣，什么时候要用表格什么时候用div了。随便搜下，几十万条。贴出dl dt dd模拟表格实例，不推荐在实际项目中使用，可以了解dl dt dd的用法。测试浏览器：IE6\IE7\IE8\FF3.0

CSS:

 Example Source Code 

dl,dt,dd{
    margin:0;
    background:#fff5fa;
    font-size:14px;
    }
dl{
    margin:0 auto;
    width:50%;
    border:1px solid #f8b3d0;
    border-bottom:none;
    }
dt{
    font-weight:800;
    background:#ff99cc;
    color:#fff;
    }
dt,dd{
    line-height:30px;
    padding:0 0 0 10px;
    border-bottom:1px solid #f8b3d0;
    height:30px;
    overflow:hidden
    }
dd{
    text-indent:3em;
    }
.fff{
    background:#fff
    }
dt span,dd span{
    display:block;
    float:right;
    font-size:14px;
    border-left:1px solid #f8b3d0;
    text-indent:0em;
    width:80px;
    text-align:center;
    }

Xhtml:

 Example Source Code 


下载地址更新时间ks5u生物同步课课练（人教版必修一）
——11.2第一节 从生物圈到细胞生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细
——11.3第二节 细胞的多样性和统一性
——11.4单元测评
——11.5欧美代议制的确立与发展
——11.6中国古代文化史
——11.7近代中国的政治、经济及思想解放的潮流
——11.9近代中国政治发展史
——11.10近代中国经济发展史
——11.11近代中国思想解放潮流
——11.12现代西方的政治、经济与科技文化
——11.13罗斯福新政与二战后的世界经济
——11.14二战后世界政治格局的演变
——11.1619世纪以来的世界文学艺术与科技 
——11.17现代中国的政治、经济及思想文化
——11.18现代中国政治发展史 
——11.19现代中国物质文明发展史（中国近现代社会生活的变迁、科技等）
——11.30古希腊罗马的政治制度

HTML代码

</style>
</head>
<body>
<dl class=hb>
<dt><span>下载地址</span><span>更新时间</span>ks5u生物同步课课练（人教版必修一）</dt>
<dd class=fff><span>——</span><span>11.2</span>第一节 从生物圈到细胞生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细生物圈到细</dd>
<dd><span>——</span><span>11.3</span>第二节 细胞的多样性和统一性</dd>
<dd class=fff><span>——</span><span>11.4</span>单元测评</dd>
<dd><span>——</span><span>11.5</span>欧美代议制的确立与发展</dd>
<dd class=fff><span>——</span><span>11.6</span>中国古代文化史</dd>
<dd><span>——</span><span>11.7</span>近代中国的政治、经济及思想解放的潮流</dd>
<dd class=fff><span>——</span><span>11.9</span>近代中国政治发展史</dd>
<dd><span>——</span><span>11.10</span>近代中国经济发展史</dd>
<dd class=fff><span>——</span><span>11.11</span>近代中国思想解放潮流</dd>
<dd><span>——</span><span>11.12</span>现代西方的政治、经济与科技文化</dd>
<dd class=fff><span>——</span><span>11.13</span>罗斯福新政与二战后的世界经济</dd>
<dd><span>——</span><span>11.14</span>二战后世界政治格局的演变</dd>
<dd class=fff><span>——</span><span>11.16</span>19世纪以来的世界文学艺术与科技</dd> 
<dd><span>——</span><span>11.17</span>现代中国的政治、经济及思想文化</dd>
<dd class=fff><span>——</span><span>11.18</span>现代中国政治发展史 </dd>
<dd><span>——</span><span>11.19</span>现代中国物质文明发展史（中国近现代社会生活的变迁、科技等）</dd>
<dd class=fff><span>——</span><span>11.30</span>古希腊罗马的政治制度</dd></dl>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

转载注明出处！

复古纯css横向下拉菜单

wo-ai-niqq@163.com(woniu) — Sun,01 Nov 2009 21:45:05 +0800

两张背景图片纯css实现，测试浏览器：IE6, IE7, IE8, Firefox, Opera, Google Chrome and Safari(PC)。

Demo

点击下载此文件

源文：http://www.cssplay.co.uk/
(转载注明出处)

纯CSS纵向下拉菜单

wo-ai-niqq@163.com(woniu) — Fri,23 Oct 2009 13:41:54 +0800

纯css下拉菜单列表，无hack，无IE判断，无table，无JS。测试浏览器 IE6、IE7、IE8、FF3.0

(转载注明出处)

[点击查看效果]

点击下载此文件

div+css布局实例:常用图文混排（四）--老外图文

wo-ai-niqq@163.com(woniu) — Thu,22 Oct 2009 10:48:12 +0800

网上搜罗的一个常见的div+css图文列表，外国人写的。学习下。

[点击预览]

点击下载此文件

div+css布局实例:常用图文混排（一）--腾讯图文
div+css布局实例:常用图文混排（二）--淘宝网衣柜
div+css布局实例:常用图文混排（三）--搜狐图文

div+css布局实例:常用图文混排（三）--搜狐图文

wo-ai-niqq@163.com(woniu) — Wed,14 Oct 2009 15:42:36 +0800

搜狐新闻中心，左边栏图文列表：

图文html结构：

Example Source Code

           图片"/>
           大标题

           文字介绍内容....
           [详细]

HTML代码

.column380 {width:380px;float:left;display:inline;border:1px solid #B8CBE4;margin:50px;}
.blank10 {margin:0 auto;height:10px; font-size:1px;clear:both;}

h2 {height:20px;background: #D8E3F1 url(<a href="http://news.sohu.com/upload/2008_sohunews/images/bg08.gif" target="_blank" rel="external">http://news.sohu.com/upload/2008_sohunews/images/bg08.gif</a>) no-repeat left top;color:#039;text-align:right;padding:0 4px 0 14px;line-height:20px;border-bottom:1px solid #B8CBE4;}
 h2 span {font-weight: bold;float:left;}
 h2 a {color:#039;}

.picTextGroup {width:352px;margin:0 auto;color:#666;line-height:20px;}
 .picTextGroup img {margin:0 10px 0 0;border:1px #A5C0E1 solid;background:#fff;padding:1px;}
 .picTextGroup .title {color:#039;font-size:18px;font-weight: bold;line-height:26px;}
 .picTextGroup .title a {color:#039;}
 .picTextGroup a {color:#666;}
 .picTextGroup .moreT a {color:#A4621C;}
 .picTextGroup a:hover {color:#CC0000;}
 .f12list ul {width:360px;margin:0 auto;clear:both;}

/* 链接颜色 */
a {color: #000;text-decoration:none}
a:hover {text-decoration:underline;}

.picTextGroup {text-align:left;margin:0 auto;line-height:20px;color:#333;width:92%}
.picTextGroup img {margin:0 4px 0 0;float:left;}			/*图文混排*/
.picTextGroup a {color:#333;}
.picTextGroup p {clear:none}

/* 列表属性 */
.f12list .more {text-align:right}
.f12list li,.f12list p {color:#333;line-height:22px;font-size:12px;text-align:left}
.f12list li a,.f12list p a {color:#333}
.f12blue td a,.f12list tr a {color:#003399}

</style>

</head>
<body>

<div class=picTextGroup>
	<p><a href="" target=_blank>
		http://i0.itc.cn/20091014/777_10b40fce_706f_42e9_bf7e_1cb0a994ca80_0.jpg</a>" width=70 border=0>
		</a>
		<span class=title><a href="" target=_blank>当代中国大学生信仰调查</a></span><br>如今，年轻一代在荧幕中高喊：因为信仰，向死而生。战争年代不再，信仰是否依旧…<span class=moreT>[<a href="" target=_blank>详细</a>]</span>
	</p>
</div>

<div class=f12list>
	<ul>
		<li>·<a href="" target=_blank>公民刘春梅之死</a>·<a class="" href="" target=_blank>高校腐败几时休，民众几时休，之恨何时已</a></li>
		<li>·<a class="" href="" target=_blank>伊朗核谈判再现新较量</a>·<a class="" href="" target=_blank>气候变暖下，小国的苦苦抗争</a></li>
		<li>·<a href="" target=_blank>课堂教学在PPT中渐失灵魂</a>·<a class="" href="" target=_blank>假如我中了3.6亿巨奖</a></li>
		</li>
	</ul>
</div>
		<div class="blank10"></div>

</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

注：样式直接拷贝自搜狐，没有做修改
div+css布局实例:常用图文混排（一）--腾讯图文
div+css布局实例:常用图文混排（二）--淘宝网衣柜

兼容IE6的纯CSS级联菜单

wo-ai-niqq@163.com(woniu) — Sat,10 Oct 2009 21:23:31 +0800

忙中偷闲写了个纯css级联菜单，测试浏览器：IE6、IE7、IE8、FF3.0。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <link rel="start" href="<a href="http://www.woaicss.com" target="_blank" rel="external">http://www.woaicss.com</a>" title="Home" />

</style>
 </HEAD>

<BODY>
	<div class="nav">
		<ul>
			<li class="first">
				
				<a href=""><span>第一级菜单1</span></a>
				<ul>
					<li class="first">
						
						<a href=""><span>第二级菜单1</span></a>
						<ul>
							<li class="first"><a href="">第三级菜单1</a></li>
							<li class="first"><a href="">第三级菜单2</a></li>
							<li class="first"><a href="">第三级菜单3</a></li>
							<li class="first"><a href="">第三级菜单4</a></li>
						</ul>
						
					</li>
					<li class="first">
						<a href="">第二级菜单2</a>
					</li>
					<li class="first">
						<a href="">第二级菜单3</a>
					</li>
				</ul>
				
			</li>
			
			<li class="first">
				
				<a href=""><span>第一级菜单2</span></a>
				<ul>
					<li class="first">
						
						<a href=""><span>第二级菜单1</span></a>
						<ul>
							<li class="first"><a href="">第三级菜单1</a></li>
							<li class="first"><a href="">第三级菜单2</a></li>
							<li class="first"><a href="">第三级菜单3</a></li>
							<li class="first"><a href="">第三级菜单4</a></li>
						</ul>
						
					</li>
					<li class="first">
						<a href="">第二级菜单2</a>
					</li>
					<li class="first">
						<a href="">第二级菜单3</a>
					</li>
					<li class="first">
						<a href="">第二级菜单4</a>
					</li>
					<li class="first">
						<a href="">第二级菜单5</a>
					</li>
				</ul>
				
			</li>
			<li class="first">
				<a href="">第一级菜单3</a>
			</li>
			<li class="first">
				
				<a href=""><span>第一级菜单4</span></a>
				<ul>
					<li class="first">
						
						<a href=""><span>第二级菜单1</span></a>
						<ul>
							<li class="first"><a href="">第三级菜单1</a>
							</li>
							<li class="first"><a href="">第三级菜单2</a>
							</li>
							<li class="first"><a href="">第三级菜单3</a>
							</li>
							<li class="first"><a href="">第三级菜单4</a>
							</li>
						</ul>
					
					</li>
					<li class="first">
						<a href="">第二级菜单2</a>
					</li>
					<li class="first">
						<a href="">第二级菜单3</a>
					</li>
				</ul>
			
			</li>
		</ul>
	</div>
 </BODY>
</HTML>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]