Navigation Problem.

Hi Guys
I hope someone here can help me out.

I have an anime site, www.erosennin.net
The navigation goes down, from Home to Contact Us. The Completed Anime page will have the whole alphabet under it, so I was wondering if anyone could help me redesign it so that it would look like in the picture in stead. Like when someone clicks on completed anime downloads, the thing will stay gray, and under it, 27 little blocks will come out from # - Z, which can then be clicked to take you to their respective pages. Like, I don't want it to actually go to teh "Completed Anime Series Page" but instead just open up that little directory of (# to Z) and let the people go the the anime letter they want to go to.

Im sorry for the crude design of the picture, but I did it pretty quick to add to this post.

Oh, Also, I replaced the origional wp_list_pages thing in the header with the call for the Page Fold List plugin, so if someone can incorporate that into it, you'd be my hero.

 

Here is the part of the CSS code if it will help anyone:

/* main navigation */
#navigation ul,#navigation li {margin: 0; padding: 0;}
#navigation li {list-style: none;}
#navigation {background: #4D92E4 url('img/grdnt_blue.jpg') repeat-x;}
#navigation a {
	border-bottom: 1px solid #FFF;
	display: block;
	font: bold 1em Verdana,sans-serif;
	height: 1.8em;
	padding: 0.6em 0 0 1em;
	text-decoration: none;
}
#navigation a:hover {background: #444;}

Code (markup):

 

Ok. After playing around in CSS a bit (and that's putting it lightly) I made some progress, though some things still do not function as they should, so if anyone could help me out with this, now minor, things, i would really appreciate it:

/* main navigation */
#navigation ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
#navigation li {
float: left;
margin: 0 0.05em;
text-align: center;
}
#navigation {background: url('img/block2.gif') #fff bottom left repeat-x;}
#navigation a {
background: url('img/block2.gif') #fff bottom left repeat-x;
	border-bottom: 1px solid #FFF;
	display: block;
float: left;
	font: bold 1em Verdana,sans-serif;
	height: 1.8em;
line-height: 1.8em;
	padding: 0.6em 0 0 1em;
	text-decoration: none;
        text-align: center;
}

#navigation a:active {
background: #444;
}

#navigation a:hover {background: #444;}

Code (markup):

ok. So far, the text-align: center; part doesn't work on here, as you can see, the text is moved over to the right on www.erosennin.net

Then, the a:active thing doesn't work either. I'm not sure why, but it goes back to blue.

Also, I still have the dillema(SP) of it going to the actual "completed anime" page instead of just moving down the letters.

Finally, it seems once i added the changes to make it go all on one line, the first post title rides up to the top left.

EDIT: It's all fixed now. Except for the "Also, I still have the dillema(SP) of it going to the actual "completed anime" page instead of just moving down the letters." part. I think I just learned most of CSS in just a couple of hours. If anyone can help me fix the last part, I'd greatly appreciate it.