Changing main menu with my own design

Hi all,

How can I change the main menu of unwakeable theme with my own design?

I wrote the below code for my menu design and don’t know what sections I should change in order to apply below code on unwakeable theme.

I want to completely change the dark grey menu with my own menu consisting of 5 different images and it’s laid out horizontally.

Below can be found the code of my menu:

#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 780px;
	height: 60px;
	background: url(images/top_border.png) no-repeat;
	position: relative;
}
#menu span {
	display: none;
	position: absolute;
}
#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menu a:hover {
	background-position: left bottom;
}
#menu a:hover span{
	display: block;
}
#menu .home {
	width: 80px;
	height: 25px;
	background: url(images/index.png) no-repeat;
	left: 320px;
	top: 20px;
}
#menu .about {
	width: 80px;
	height: 25px;
	background: url(images/about.png) no-repeat;
	left: 406px;
	top: 20px;
}
#menu .archive {
	width: 80px;
	height: 25px;
	background: url(images/archive.png) no-repeat;
	left: 492px;
	top: 20px;
}
#menu .sitemap {
	width: 80px;
	height: 25px;
	background: url(images/sitemap.png) no-repeat;
	left: 578px;
	top: 20px;
}
#menu .contact {
	width: 80px;
	height: 25px;
	background: url(images/contact.png) no-repeat;
	left: 664px;
	top: 20px;
}

You can download the theme as a zip from here or view the theme here

Thank you very much for any suggestions and help!!!