Rollover horizontal list Menu

<!-- You must build this code into - head -->
Step 1.
<style type="text/css">
#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #333;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #333;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #FBE255;
border-color: #227;
}

#navlist li a#current
{
background: #FBE255;
border-bottom: 1px solid #FBE255;
}
</style>
Step 2.
<!-- You must build this code into - body -->
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Pablo Picasso</a></li>
<li><a href="#">Vincent van Gogh</a></li>
<li><a href="#">Wassily Kandinsky</a></li>
<li><a href="#">Salvador Dali</a></li>
<li><a href="#">Henri Matisse</a></li>
</ul>
</div>

Vertical Rollover List Menu

<!-- You must build this code into - head -->
<style type="text/css" media="screen">
	ul#navigation
	{
		margin-left: 0;
		padding-left: 0;
		list-style-type: none;
	}
	
	ul#navigation a
	{
		display: block;
		text-decoration: none;
		background: #036;
		color: #fff;
		padding: .2em .5em;
		border-bottom: 1px solid #fff;
		width: 7em;
	}
	
	ul#navigation a:hover
	{
		background: #69C;
		color: #000;
	}
	
	ul#navigation li
	{
		display: inline;
	}
</style>
<!-- You must build this code into - body -->
<ul id="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Staff</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Sitemap</a></li>
</ul>