Customizing Drop down menu

[Elfquest24]

I'm trying to customize the CSS dropdown menu on my site but now there are a couple of things i can't get the way i want them. I have tried to by experimenting with the CSS and tried to find some tuts or guides but i'm not making any progress. This is where i am stuck:

- I want the menu to automatically stretch and fill up the cell with the fairycat in it from left to right. But how?
- I want every block with text to have the same width. The width is adjusting to the text now. For instance 'Adoption' is wider then 'Misc' is. How do i get it to have the same width automatically?

Here is the url:

http://home.versatel.nl/Elfquest/Und...truction2.html

I'm really hoping one of you can tell me what to change in the code as i am totally stuck here.

[Elfquest24]

Here is the code:

#menuList {
	position:relative;
	font-size:15px;
	font-family: Arial;
	z-index:100;
	margin: 0px;
	padding: 2px;
}

#mainMenu {
	position:relative;
	background: #AABCB0;
}

#menuList ul {
	z-index:100;
	margin: 1px;
	padding: 0px;
}

#menuList li {
	z-index:100;
	display:inline;
	list-style: none;
	margin: 0px;
	padding: 0px;
}

a.starter {
	z-index:100;
	margin: 0px;
	padding: 42px;
	border: 1px solid #666666;
    background-color: #AABCB0;
    color: #000000;
    margin-right: 0px;
    padding-top: 2px;
    padding-bottom: 0px;
}

a.starter:hover, a.starter:active, a.starter:focus {
	background-color: #ffffff;
	color: #3F4C78;
}
#menubuilder, #stylelibrary, #aboutus {
	width: 120px;
}
.menu {
	text-align: left;
	position: absolute;
	visibility: hidden;
	z-index: 100;
}
.menu li {
	width:100%;
}
.menu li a {
	background: #D8E1DB;
	z-index:100;
	color: #000000;
	display: block;
	width:150px;
	font-size: 1em;
	padding:2px;
	margin: 0px;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	margin-top:-2px;
}

.menu li a:hover, .menu li a:active, .menu li a:focus {
	background-color: #AABCB0;
	color: #3F4C78;
}