Стилизуем список одним пикселем.

Однопиксельный фоновый рисунок может стать очень удобным многоцелевым инструментом. Размножив его в различных направлениях можно получить горизонтальную линию, вертикальную линию, а также фоновую заливку. Например, его можно использовать для оформления иерархического списка, который первоначально выглядит как беспорядочный набор записей.

В HTML-разметке ничего особенного - обычный вложенный, неупорядоченный список.

<ul id="project-list">
	<li><a href="#">Civil Engineering<</a>
		<ul>
			<li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
			<li><a href="#">Culver’s Home Office</a></li>
			<li><a href="#">First Addition to Highland Addition</a></li>
			<li><a href="#">Fox Point Apartments</a>
				<ul>
					<li><a href="#">East Side</a></li>
					<li><a href="#">West Side</a></li>
				</ul>
			</li>
			<li><a href="#">Metropolitan Place Phase II</a></li>
			<li><a href="#">Oak Park Place of Baraboo</a></li>
			<li><a href="#">Premier Coop</a></li>
			<li><a href="#">Sleep Inn & Suites</a><</li>
			<li><a href="#">Tradewinds Business Center</a></li>
			<li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
		</ul>
	</li>
	<li><a href="#">Environmental Engineering</a></li>
	<li><a href="#">Telecommunications Engineering</a>
		<ul>
			<li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
			<li><a href="#">Oakland County/Radian Communications Michigan</a></li>
			<li><a href="#">T-Mobile Site Deployment</a></li>
			<li><a href="#">U.S. Cellular Network Development</a></li>
			<li><a href="#">Western Wireless South Dakota</a></li>
		</ul>
	</li>
</ul>

В CSS, для отображения вертикальной и горизонтальной линий, мы будем использовать одинопиксельные рисунки PNG.

В элементах списка, мы можем прерывать линии, устанавливая фон ссылки, которая уже расположена выше элемента списка, в белый цвет (ну или в необходимый нам цвет). Если этот фон не устанавливать, то получим зачеркнутые по всей длине элементы списка.

#project-list { 
	background	: transparent url(../images/graypixel.png) repeat-y 15px 0;
	width		: 340px;
}
#project-list li {
	font-size	: 16px;
	margin		: 15px 0 20px;
	padding		: 0 0 0 10px;
}
#project-list li a {
	background	: white;
	color		: #1F6DD9;
	display		: block;
	padding		: 3px;
}
#project-list li a:hover {
	color		: #84B8FF;
}
#project-list li ul li {
	background	: transparent url(graypixel.png) repeat-x 0 8px;
	font-size	: 13px;
	margin		: 4px 0 4px 5px;
	padding		: 0 0 0 20px;
}
#project-list li ul li a {
	padding		: 0 0 0 3px;
}
#project-list li ul li ul {
	background	: transparent url(graypixel.png) repeat-y 15px 0;
	margin-bottom	: 10px;
}
#project-list li ul li ul li {
	margin-left	: 16px;
	padding-left	: 10px;
}

Пример

UPD: К вопросу того, что криво выглядит в IE6.