First of all I'd like to thank for this wonderful theme. For someone like me, who's never been that much into coding, this literally awesome. Thanks!

I'm trying to finalize a design I've made for some time ago, and have so far succeed pretty well. However, I can't seem to figure out how to change the site navigation.
My intention is to change the navigation into images instead of the original one, either with .css or html. I believe I've found a .css code that allows this, but as I don't really know alot about this, I'm only assuming.
My mock up version of the menu looks like this:

And the .css file I've "created" (with a tutorial) looks like this:

<ul class="menu">
	<li class="nyheder"><a href="#">nyheder</a></li>
	<li class="holdet"><a href="#">holdet</a></li>
	<li class="kampe"><a href="#">kampe</a></li>
	<li class="omos"><a href="#">om os</a></li>
	<li class="partnere"><a href="#">partnere</a></li>
</ul>

.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	background: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/menu_bg.png)
}
.menu li {
	padding: 0;
	margin: 0;
	height: 34px;
	width: 900px;
	margin-right: 1em;
	list-style: none;
	background-repeat: repeat top left;
}
.menu li a, .menu li a:visited {
	display: block;
	text-decoration: none;
	text-indent: -1000px;
	height: 34px;
	background-repeat: repeat top left;
}
.nyheder {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/nyheder.png); width: 77px;}
.nyheder a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/nyheder_g.png);}
.holdet {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/holdet.png); width: 77px;}
.holdet a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/holdet_g.png);}
.kampe {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/kampe.png); width: 77px;}
.kampe a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/kampe_g.png);}
.omos {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/omos.png); width: 77px;}
.omos a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/omos_g.png);}
.partnere {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/partnere.png); width: 77px;}
.partnere a {background-image: url(http://skoven-gaming.dk/wordpress/wp-content/themes/atahualpa333/images/menu/partnere_g.png);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

(http://www.cdjgfx.dk/menu.css)

Is this possible to create this menu (with a static background as well as hovering images) within this template? If so, how?

Edit: The URL for the site is http://skoven-gaming.dk/wordpress/.. I'm sure that the .css "file" I uploaded are lacking some links and stuff, so guess the link could be somewhat vital.

see http://forum.bytesforall.com/showthread.php?t=1981 - post #3