Example using CSS and List elements to create menus.

Because this technique uses CSS most of the code can be kept in a cached file and hence this is a very lightweight approach to a common goal.

This file downloaded from codestore.net and original code borrowed from A List Apart.

The HTML used for the menu is simply:

 <div id="arealinks">
  <ul>
   <li><a href="area?OpenView&RestrictToCategory=Agents">Agents</a></li>
   <li><a href="area?OpenView&RestrictToCategory=Forms">Forms</a></li>
   <li><a href="area?OpenView&RestrictToCategory=Java">Java</a></li>
   <li><a href="area?OpenView&RestrictToCategory=JavaScript">JavaScript</a></li>
   <li><a href="area?OpenView&RestrictToCategory=Miscellaneous">Miscellaneous</a></li>
   <li><a href="area?OpenView&RestrictToCategory=Quick%20Tips">Quick Tips</a></li>
   <li><a href="area?OpenView&RestrictToCategory=Views">Views</a></li>
   <li><a href="area?OpenView&RestrictToCategory=XML">XML</a></li>
  </ul>
 </div> 

The required CSS is like so:

#arealinks {
	width			:	12em;
	border-right	:	1px solid #000;
	padding			:	0 0 0 0;
	margin-bottom	:	0em;
	font-family		:	Verdana, Helvetica, Arial, sans-serif;
	font-weight		:	bold;
	font-size		:	13px;
	background-color:	white;
	color			:	#333;
}
	
#arealinks ul {
	list-style		:	none;
	margin			:	0;
	padding			:	0;
	border			:	none;
}
			
#arealinks li {
	border-bottom	:	1px solid #90bade;
	margin			:	0;
}

#arealinks li a {
	display			:	block;
	padding			:	5px 5px 5px 0.5em;
	border-left		:	10px solid #1958b7;
	border-right	:	10px solid #508fc4;
	background-color:	#66ccff;
	color			:	#fff;
	text-decoration	:	none;
	width			:	100%;
}
	
html>body #arealinks li a {
	width			:	auto;
}
	
#arealinks li a:hover {
	border-left		:	10px solid #1c64d1;
	border-right	:	10px solid #5ba3e0;
	background-color:	#2586d7;
	color			:	#fff;
}