任鸟飞网站设计博客

通过对CSS边框属性（bottom-border）的样式定义来制作树状目录。

1. HTML 代码

<ul class="menu">
  <li><strong>设计</strong> <em>20</em></li>
  <li><strong>灵感</strong> <em>32</em></li>
  <li><strong>免费素材</strong> <em>24</em></li>
</ul> 

2. CSS 代码

.menu {
	width: 500px;
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
	font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
	clear: both;
	margin: 0;
	padding: 0 0 1.8em 0;
	position: relative;
	border-bottom: dotted 2px #999;
}
.menu strong {
	background: #fff;
	padding: 0 10px 0 0;
	font-weight: normal;
	position: absolute;
	bottom: -.3em;
	left: 0;
}
.menu em {
	background: #fff;
	padding: 0 0 0 5px;
	font: 110%/100% Georgia, "Times New Roman", Times, serif;
	position: absolute;
	bottom: -.2em;
	right: 0;
}

说明：

• 定义li标签位置及边框：position:relative；bottom-border:dotted。
• 定义strong和em标签位置：position:absolute 。

3. 可自由改变li标签边框样式

li { border-bottom: dashed 1px #000;    padding: 0 0 2.3em 0;}

4. IE6样式修正

/* clearfix */
.menu li:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;  }
	.menu li {display: inline-block;}
	/* Hides from IE-mac */
	* html .menu li {height: 1%;}
	.menu li {display: block;}
	/* End hide from IE-mac */  

预览：css menu list design