Two Navigation Lists?

[confusedesigner]

Hi everyone,

I've made a working nav menu with images.

I'm not sure if i've gone the right way about coding it...

I want something like this which i made in my mock up in photoshop.

http://postimage.org/image/22q0h5mro/

This is my current code.

ul#topnav {
	margin: 0; padding: 0;
	list-style: none;
	float: left;
	width: 200px;
        position: relative;
	top: 190px;
	left: 470px;

}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;

}

/*--CSS Sprites - Default State--*/
ul#topnav a {	
	display: block;
	height: 20px; /*--Specify height of navigation--*/
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
	background-position: left -58px;
}
/*--Assign an image and width to each link--*/
ul#topnav li.news a {
	background-image: url(images/news_a.gif);
	width: 40px;
}
ul#topnav li.music a {
	background-image: url(images/music_a.gif);
	width: 50px;
}
ul#topnav li.gallery a {
	background-image: url(images/gallery_a.gif);
	width: 70px;
}
ul#topnav li.bio a {
	background-image: url(images/bio_a.gif);
	width: 40px;
}


#news li.news a, /*--News Page > News Link--*/
#music li.music a, /*--Music Page > Music Link--*/
#gallery li.gallery a, /*--Gallery Page > Gallery Link--*/
#bio li.bio a, /*--Bio Page > Bio Link--*/

{
	background-position: left bottom;
}

/*--BOTTOM NAV--*/

/*--CSS Sprites - Default State--*/
ul#bottomnav a {	
	display: block;
	height: 20px; /*--Specify height of navigation--*/
	text-indent: -99999px; /*--Shoot the text off the page--*/
	background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#bottomnav a:hover {
	background-position: left -58px;
}
/*--Assign an image and width to each link--*/
ul#bottomnav li.videos a {
	background-image: url(images/video_a.gif);
	width: 59px;
}
ul#bottomnav li.events a {
	background-image: url(images/events_a.gif);
	width: 66px;
}
ul#bottomnav li.extras a {
	background-image: url(images/extras_a.gif);
	width: 60px;
}
ul#bottomnav li.buy a {
	background-image: url(images/buy_a.gif);
	width: 55px;
}


#videos li.videos a, /*--Videos Page > Videos Link--*/
#events li.events a, /*--Events Page > Events Link--*/
#extras li.extras a, /*--Extras Page > Extras Link--*/
#buy li.buy a, /*--Buy Page > Buy Link--*/

{
	background-position: left bottom;
}

ul#bottomnav {
	margin: 0; padding: 0;
	list-style: none;
	float: left;
	width: 240px;
        position: relative;
	top: 215px;
	left: 258px;

}
ul#bottomnav li {
	float: left;
	margin: 0; padding: 0;

}

[HTML]
<!--NAVIGATION -->


<ul id="topnav">
<li class="news"><a href="index.html">NEWS</a></li>
<li class="music"><a href="music.html">MUSIC</a></li>
<li class="gallery"><a href="gallery.html">GALLERY</a></li>
<li class="bio"><a href="bio.html">BIO</a></li>

</ul>


<ul id="bottomnav">
<li class="videos"><a href="videos.html">VIDEOS</a></li>
<li class="events"><a href="events.html">EVENTS</a></li>
<li class="extras"><a href="extras.html">EXTRAS</a></li>
<li class="buy"><a href="buy.html">BUY</a></li>

</ul>

[/HTML]

Is there a simpler way of accomplishing this? Mine seems a bit bloated for such a simple look.

please help me!