0元购京东自营斐讯K2路由器返399元活动
置顶

利用CSS制作树状目录(菜单)

作者:     目录: 小代码     发表: 2010年01月18日

通过对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

标签: .

发表评论

电子邮件地址不会被公开。 必填项已用*标注