Centered Suckerfish Menu with Auto Item Width

I'd like to add a drop-down menu on themebot.com. It needs to be light-weight and accessible for search engines. I've looked at Suckerfish, Suckerfish variations and other CSS-based drop down menus but I haven't found a technique that will work for this specific situation:

1. The first requirement is that the menu needs to be centered with something like

margin:0px auto;

Code (markup):

. I can manually center the flat list by adding margin to the left side, but this will not work well because different browsers use different fonts and so the menu will be off-center in some browsers.

The second requirement is that the menu items need to all have the same amount of padding on the right and left sides. The dropdown menus I've seen that can be centered use a set width for the list items. This adds a lot of unnecessary padding. For example, the menu items "FAQ" and "Website Templates" will both have the same set width. This limits the number of top level menu items that can be added and doesn't look very good.

Does anyone know of a technique that works for both of the requirements above?

Thanks in advance!

 

Like the menu on Free Div Layouts?

Here is how I did that:

HTML:

<ul id="listmenu">
<li>Menu Item 1</li>
<li id="last">Item 2</li>
</ul>

HTML:

CSS:

ul#listmenu {
	width:510px;
	margin:auto;
	text-align:center;
}

ul#listmenu li {
	list-style:none;
	float:left;
}

ul#listmenu li#last {
	clear:both;
}

ul#listmenu li a, ul#listmenu li a:link, ul#listmenu li a:active, ul#listmenu li a:visited {
	display:block;
	font-weight:bold;
	text-decoration:none;
	height:28px;
	width:102px;
	background-image:url(http://www.freedivs.com/gfx/menu-bg.png);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#597899;
	color:#FFFFFF;
	padding-top:10px;
}

ul#listmenu li a:hover {
	color:#000000;
	text-decoration:underline;
	background-image:url(http://www.freedivs.com/gfx/menu-hover.png);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}

Code (markup):

Although thats a fixed width, I'm pretty certain it should work by just taking out the width:102px; property in the CSS. You need the width in the ul element though, so that it centers with the margin:auto;

 

I don't see a dropdown menu on free div layouts.

 

Okay, well you didn't say you wanted a dropdown menu

 

Yah. I've already got a decent flat-list centered menu.