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/Under-construction2.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;
}