pagerunners.com: css menu

A rollover-type menu, ideally suited to a left side navigation scheme and using a style sheet. As the user passes the mouse over each link, the text is highlighted and borders appear above and below the link. It appears to be using table cells, however, list tags (<UL>) are used instead. The code for the menu is fairly simple; in the textarea, you will find the source code for the menu and the style sheet.

Source code:

<a href="tricks.htm" title="HTML Tips N' Tricks">HTML Tips N' Tricks</a>
</li>
<li>
<a href="selmenu.htm" title="Selection Menu">Selection Menu</a>
</li>
<li><a href="imagewrk.htm" title="Imagworks">Imageworks</a>
</li>
<li><a href="edge.htm" title="Edge Effects">Edge Effects</a></li>
<li class="bottom"><a href="webbutton.htm" title="Web Buttons">Web Buttons</a></li>
</ul>
</div>
</div>

</div>
</div>
</div>

#column_left {
	position: relative;
	float: left;
	width: 160px;
	padding-top: 0px;
	background: transparent;
	border-right: 1px solid #A1A5A9;
	background: transparent;
	}

#left_nav {
	position: relative;
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #A1A5A9;
	border-bottom: 1px solid #A1A5A9;
	background: #e7e5d9;
	}

#left_navigate ul {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-align: right;
	list-style-type: none;
	list-style-image: none;
	}

#left_navigate ul li a {
	display: block;
	height: 100%;
	color: #666;
	padding-right: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
	text-decoration: none;
	line-height: 10px;
	border-top: 1px solid #e7e5d9;
	border-bottom: 1px solid #e7e5d9;
	}

#left_navigate ul li a:hover {
	font-weight: bold;
	color: #000;
	border-top: 1px solid #A1A5A9;
	border-bottom: 1px solid #A1A5A9;
	}