Question on CSS Dropdown Menu

[kenaron]

I've got a CSS dropdown menu on my website (http://www.averybiomedical.com) that is based off of the suckerfish model. I would like to increase the width of the dropdown menu to be greater than that of the heading. I've done that part with some additional CLASS statements. The problem is the result looks like this:

|_________|_____
|_______________|
|_______________|
|_______________|

I would like the dropdown to be centered under the heading, not left aligned, like this:

___|_________|___
|_______________|
|_______________|
|_______________|

I cannot find a suckerfish example that is not left aligned, and can't figure out what variables I need to set to get this result.

Any help would be greatly appreciated.

[sands]

The dropdown is centered in IE6 and the latest Firefox and Opera. Did you dabble with it after making this post? Which browser are you using?

[kenaron]

Sorry I wasn't clear...the online version still has the header and the dropdown as the same size. I was trying to get this to work on a local copy before taking it live.

I've uploaded a sample page here:
http://www.averybiomedical.com/temp.html

and the stylesheet here:
http://www.averybiomedical.com/styletemp.css

I've used IE6/7, Firefox, and Opera to check the site.

Thanks,
Ken

[sands]

Originally Posted by kenaron

Sorry I wasn't clear...the online version still has the header and the dropdown as the same size. I was trying to get this to work on a local copy before taking it live.

But this version looks horrible with so wide a dropdown. The original one is just as presented by you in your first post. The dropdown is wider than the header in the original and looks good. I am not really sure what exactly you wish to achieve. I thought you wanted the dropdown to be centered and a little wider than the header and this is exactly how it is now.

[kenaron]

Originally Posted by sands

But this version looks horrible with so wide a dropdown. The original one is just as presented by you in your first post. The dropdown is wider than the header in the original and looks good. I am not really sure what exactly you wish to achieve. I thought you wanted the dropdown to be centered and a little wider than the header and this is exactly how it is now.

Oh, I agree...I don't intend to make the final version that wide...the sample is just 2x the header.

The reason I'm doing this is I'm going to need to add one, maybe two, more headers and I can't keep making the dropdowns as narrow. If you click through to one of the links to the other pages, you'll see what I mean.

I don't want to make the font smaller, so wider dropdowns seemed the way to go.

[kenaron]

If anyone cares, I figured it out. I don't think it's possible to automatically do this, but a quick calculation does the trick...

Subtract the header width from the dropdown width and divide the result by two.

Set the margin-left to the negative of that value, and the dropdown will center under the header.

For example, if the header is 100px and the dropdown is 130px, set margin-left:-15px;

Ken