Using CSS to style lists

/***********************************************************************************/
/* Styling a list using CSS */
/* ------------------------------------------------------------- */
/* The design for this list was taken from the article "CSS Design: Taming Lists" */
/* by Mark Newhouse, published in A List Apart, September 27, 2002 */
/* http://www.alistapart.com/articles/taminglists/ */
/***********************************************************************************/

#NewhouseList {
display: none;
width: 20em;
padding: 0;
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #90bade;
color: #333;
}
#NewhouseList ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#NewhouseList li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#NewhouseList li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #NewhouseList li a {
width: auto;
}
#NewhouseList li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

I came across this handy technique of using pure CSS to design nice looking lists. It's from an article on A List Apart by Mark Newhouse, written back in 2002. There's a link to this article in the list below.

I was going to use this for a show/hide list of related topics (hence the link below). In the end I decided not to because it didn't fit with the rest of the page design.

Click the following link to show/hide the list.

Related topics

The source that produced this:

<STYLE type="text/css">
/***********************************************************************************/
/* Styling a list using CSS                                                        */
/* -------------------------------------------------------------                   */
/* The design for this list was taken from the article "CSS Design: Taming Lists"  */
/* by Mark Newhouse, published in A List Apart, September 27, 2002                 */
/* http://www.alistapart.com/articles/taminglists/                                 */
/***********************************************************************************/

#NewhouseList {
	display: none;
	width: 20em;
	padding: 0;
	margin: 0;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica,
	  Arial, sans-serif;
	background-color: #90bade;
	color: #333;
}
#NewhouseList ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}
#NewhouseList li {
	border-bottom: 1px solid #90bade;
	margin: 0;
}
#NewhouseList li a {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 10px solid #1958b7;
	border-right: 10px solid #508fc4;
	background-color: #2175bc;
	color: #fff;
	text-decoration: none;
	width: 100%;
}
html>body #NewhouseList li a {
	width: auto;
}
#NewhouseList li a:hover {
	border-left: 10px solid #1c64d1;
	border-right: 10px solid #5ba3e0;
	background-color: #2586d7;
	color: #fff;
}
</STYLE>

<script>
  <!--

function fExpandCollapseRelatedTopics()
{
    //Get the element with the id "NewhouseList" (note: this is a div below the "Related topics" link:
    var oRTsection = document.getElementById("NewhouseList");

    //OnClick, toggle the div between displayed and not displayed:
    oRTsection.style.display = (oRTsection.style.display=='block') ? 'none': 'block';

    return false;
}
    -->
</script>    

<p>
<br>
<a class="expandRelatedToggle" id="expandRelated" title="Click to show/hide" href="javascript:void(0)"
name="relatedTopics" onclick="fExpandCollapseRelatedTopics(); return false">Related topics</a>
</p>

<div id="NewhouseList">
<ul>
    <li><a href="http://www.alistapart.com/articles/taminglists/" title="Click to move to this topic">CSS Design: Taming Lists</a></li>
    <li><a href="http://www.alistapart.com/" title="Click to move to this topic">A List Apart - home page</a></li>
    <li><a href="http://www.w3.org/TR/REC-html40/present/styles.html" title="Click to move to this topic">W3C Style Sheets reference</a></li>
    <li><a href="http://feeds.feedburner.com/itauthor" title="Click to move to this topic">ITauthor podcasts</a></li>
    </ul>
</div>