草窟设计 » 很好用的 CSS 目录树

我时常都是做静态页的网站，这是我常用的一个 css 目录树：
先看效果：

OK:怎么做的呢，是这样的。。。。。

首先，HTML:

<div id="sidebar">
<ul>
	<li>
<h2>Low-Limited Texas Holdem</h2>
<ul>
	<li><a href="/advice/">General Advice</a></li>
	<li><a href="/position/">Position</a></li>
	<li><a href="/hands/">Reading your hands</a></li>
	<li><a href="/bluffing/">Bluffing</a></li>
</ul>
</li>
	<li>
<h2>Texas Holdem Tournament</h2>
<ul>
	<li><a href="/rules-rewards/">Rules and rewards distribution</a></li>
	<li><a href="/tournaments/">From Nobody to Somebody</a></li>
	<li><a href="/no-limit-tournament/">No-limit Tournament Advice</a></li>
</ul>
</li>
	<li>
<h2>Online Texas Holdem Strategy</h2>
<ul>
	<li><a href="/online/">Online vs. Offline</a></li>
	<li><a href="/tips-strategy/">Tips and Strategy</a></li>
</ul>
</li>
</ul>
</div>

然后呢，CSS:

#sidebar {margin:10px 10px 0 0; float:right; width:250px; background:#030303; border:#006600 solid 2px;}
#sidebar h2 {padding:0 10px; line-height:30px; background:url(images/h2bg.gif) top center no-repeat; font-size:14px; height:30px; display:block; margin:0;}
 
#sidebar ul {margin:0;list-style:none; padding:0;}
#sidebar ul li {margin:0; padding:0 0 10px 0; display:block;}
#sidebar ul ul {margin: 0; list-style:none; padding:0;}
#sidebar ul ul li {padding:0; height:25px; margin:0; background:url(images/libg.gif) no-repeat;}
#sidebar a{text-decoration:none;color:#0f0; display:block; padding:0px 10px 0px 15px; line-height:25px; font-size: 12px; }
#sidebar a:hover{text-decoration:none; color:#FFFFFF; background:url(images/libgh.gif) no-repeat; padding-left:25px;}