Drop down menu customizing problems

[Elfquest]

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 (again).

[Elfquest]

This 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;
}

[hortmaster]

This is a code I use on my page that may answer your problem. It is from dynamicdrive but the width, bgcolor, style, ect. are editable with CSS.

http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Instructions to implement this script are included in the above URL If you can't figure out Elfquest's advanced CSS knowledge, try this.

[Elfquest]

Thanks very much!
But i would really like to keep this menu and not switch to another. I have allready tried so many different menu's and i would really like to get this to look the way i want it. I have figured out so much myself and i am so close . I hope somebody wants to help me get this right.

[_Aerospace_Eng_]

Make a.starter display:block; give it a width. That should get you going in the right direction.

[Elfquest]

Hi,
Thanks, but i did as you suggested and now my menu looks like this: :confused:

http://home.versatel.nl/Elfquest/Menutest2.html

Giving a.starter several different widths didn't help either.

Here are the adjustments i made to the code


a.starter {
display:block;
width:300px;
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 {
display:block;
background-color: #ffffff;
color: #3F4C78;

I did like you said right?
I don't understand what i'm doing wrong? :(

[_Aerospace_Eng_]

You added TOO much width.
a.starter {
display:block;
width:136px;
z-index:100;
margin: 0px;
padding:5px;
text-align:center;
border: 1px solid #666666;
background-color: #AABCB0;
color: #000000;
float:left;
margin:0 2px;
}

/* De uitgeklapte menuubalkjes als je eroverheen gaat met de muis */

a.starter:hover, a.starter:active, a.starter:focus {
background-color: #ffffff;
color: #3F4C78;

}
Common sense really. How can 5 300px blocks all fit on one line that is only about 800px wide ?

[Elfquest]

Thanks!
For you this might be common sense. To me this code is abracadabra ;)
Soo i did what you said.
Changing 300 px to 136 px still didn't give me my horizontal menu back. I've tried that yesterday to no avail.
But i copied the rest of changes to the code you posted today and now the menu is horizontal again. I think the float:left; did the trick.
Yessss
AND every block has the same width like i wanted and i've managed to let the menu fill up the whole cell it's in. :) Thats the good news.
The bad news is that now my dropdown menus are gone? :(

http://home.versatel.nl/Elfquest/Menutest2.html

[_Aerospace_Eng_]

Don't give the same class to all of your li's. You want those li's to be float:none; because they have the starter class they are all being floated left.