用 UL 实现的“当前位置”导航效果

许多网站（特别是分类、栏目较多的网站），都会在页面醒目处放置一个“当前位置”的导航条，方便用户快速跳转，本文介绍的是用 UL 实现的类似效果。

用 UL 实现的“当前位置”导航效果 – 示例

<style type="text/css">
#crumbs {
	background-color: #eee;
	padding: 4px;
}
#crumbs ul {
	display: inline;
	padding-left: 0;
	margin-left: 0;
}
#crumbs ul li {
	display: inline;
}
#crumbs ul li a:link {
	padding: .2em;
}
#crumbs ul ul li{
	background-image: url('caret-r.gif');
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 12px;
}
</style>

<div id="crumbs">
	<ul>
		<li><a href="http://www.codebit.cn">首页</a>
		<ul>
			<li><a href="http://www.codebit.cn/pub/article.php">文章</a>
			<ul>
				<li><a href="http://www.codebit.cn/pub/html/php_mysql/">PHP/MySQL</a>
				<ul>
					<li><a href="http://www.codebit.cn/pub/html/php_mysql/tip/">PHP/MySQL Tip</a>
					<ul>
						<li><a href="http://www.codebit.cn/pub/html/php_mysql/tip/data/">数据类型</a></li>
					</ul>
					</li>
				</ul>
				</li>
			</ul>
			</li>
		</ul>
		</li>
	</ul>
</div>