Stuff

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<meta name="GENERATOR" content="Khafra">

<style type="text/css">


#navigation ul, li { /* using a list for menu */
list-style-type: none;  /* cleaning up the list */
margin:0;
padding:0;
}

#navigation ul {
position: absolute; /* positioning for IE5 et IE5.5 */
left: 0;
top: 150px;
background: transparent url(streamtree.jpg) top left no-repeat; /* general background for the menu */
height: 512px;
width: 341px;
text-align: center;
}

#navigation li {
display: inline; /* correction for IE5 et IE5.5 */
}

#navigation li a { /* buttons dimensions and definition */
display: block;  /* block for <a> to give it its dimensions */
height: 40px;
width: 341px;
line-height: 40px;  /* height of line to avoind paddings */
color: white;
font-size: 18px;
font-family: georgia, serif;
text-decoration: none;
}

#navigation li a:hover {
color: #43271B;
background: transparent url(http://img.photobucket.com/albums/v293/khafra/streamtree.jpg) top left no-repeat;
}

a#menu1:hover {
background-position: 0% 40px; /* move of background for each button */
}

a#menu2:hover {
background-position: 0% 80px;
}

a#menu3:hover {
background-position: 0% -592px;
}

a#menu4:hover {
background-position: 0% -632px;
}

a#menu5:hover {
background-position: 0% -672px;
}

a#menu6:hover {
background-position: 0% -712px;
}

</style>

</head>

<body>

<div id="navigation">

<ul>
	<li><a id="menu1" title="menu1" accesskey="1" href="#">Menu 1</a></li>
	<li><a id="menu2" title="menu2" accesskey="2" href="#">Menu 2</a></li>
	<li><a id="menu3" title="menu3" accesskey="3" href="#">Menu 3</a></li>
	<li><a id="menu4" title="menu4" accesskey="4" href="#">Menu 4</a></li>
	<li><a id="menu5" title="menu5" accesskey="5" href="#">Menu 5</a></li>
	<li><a id="menu6" title="menu6" accesskey="6" href="#">Menu 6</a></li>
</ul>

</div>

</body>
</html>