给出以下菜单结构：
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="Default.aspx">Home</a></li>
<li><a href="About.aspx">About Us</a></li>
<li>
<a href="#">Automotives</a>
<ul>
<li><a href="#">Masking Film</a></li>
<li><a href="#">Promo Items</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">External Protection</a></li>
<li><a href="#">Internal Protection</a></li>
</ul>
</li>
<li>
<a href="#">Packaging</a>
<ul>
<li>
<a href="#">Cardboard boxes</a>
<ul>
<li><a href="#">Big Boxes</a></li>
<li><a href="#">Small Boxes</a></li>
<li><a href="#">Medium Boxes</a></li>
</ul>
</li>
<li><a href="#">Paper bags</a></li>
<li><a href="#">Polythene bags</a></li>
<li><a href="#">Polythene layflat tubing</a></li>
<li><a href="#">Postall bags & packaging</a></li>
<li><a href="#">Protective Packaging</a></li>
<li><a href="#">Refuse sacks</a></li>
<li><a href="#">Retail</a></li>
<li><a href="#">Strapping</a></li>
<li><a href="#">Tapes</a></li>
</ul>
</li>
<li>
<a href="#">Eco Friendly</a>
<ul>
<li><a href="#">Recycled bags</a></li>
<li><a href="#">Degradable bags</a></li>
<li><a href="#">Random bags</a></li>
<li><a href="#">Cotton bags</a></li>
<li><a href="#">Compostable bags</a></li>
</ul>
</li>
<li><a href="Design.aspx">Design Service</a></li>
<li><a href="Contact.aspx">Contact Us</a></li>
<li><a href="Offers.aspx">Offers</a></li>
</ul>
<br style="clear: left" />
</div>
所有菜单按钮看起来都很棒，但它们在容器中保持对齐。我无法弄清楚如何让它们在菜单栏中居中，这样无论浏览器窗口有多宽，它们总是处于中间位置。
相关的CSS是：
.ddsmoothmenu {
font: bold 12px Verdana;
background: #2773A0;
/*background of menu bar (default state)*/
width: 100%;
background-image: url(../images/menuBG.jpg);
z-index: 9999;
}
.ddsmoothmenu ul {
z-index: 9999;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li {
position: relative;
display: inline;
float: left;
z-index: 9999;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a {
display: block;
color: white;
padding: 8px 10px;
border-right: 1px solid #ffffff;
color: #2d2b2b;
text-decoration: none;
padding: 10px 30px 10px 30px;
font-size: 18px;
font-family: Arial;
font-weight: normal;
z-index: 9999;
}
* html .ddsmoothmenu ul li a {
/*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
z-index: 9999;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
color: white;
}
.ddsmoothmenu ul li a.selected {
/*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: #2773A0;
color: white;
z-index: 9999;
}
.ddsmoothmenu ul li a:hover {
background: #4FA2D2;
/*background of menu items during onmouseover (hover state)*/;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul {
position: absolute;
left: 0;
display: none;
/*collapse all sub menus to begin with*/
visibility: hidden;
z-index: 9999;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li {
display: list-item;
float: none;
background: #2773A0;
/*background of menu items (default state)*/
z-index: 9999;
border-right: 0px;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul {
top: 0;
border-right: 0px;
z-index: 9999;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a {
font: normal 13px Verdana;
width: 200px;
/*width of sub menus*/
padding: 10px;
margin: 0;
border-right: 0px;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu {
height: 1%;
} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass {
position: absolute;
top: 17px;
right: 7px;
}
.rightarrowclass {
position: absolute;
top: 14px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
z-index: 89;
}
.toplevelshadow {
/*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
z-index:89;
filter:alpha(opacity=80);
}
答案 0 :(得分：2)
在这里，现在停止使用表格进行布局。这种技术属于历史的废纸箱。 Go educate yourself on why您真的不应在此处使用表格。现在就如何集中这一点。看看这个jsfiddle：http://jsfiddle.net/ezsZb/
该技术基本上是这里描述的：http://www.tightcss.com/centering/center_variable_width.htm。没什么，它是一种相当普遍的技术。
该插件的代码很可怕，所以我们只是在这里使用CSS和HTML。假设这个HTML结构：
<div id="smoothmenu1">
<div id="wrapper">
<ul id="innerul">
...
</ul>
</div>
<br style="clear: left" />
</div>
使用此配置：
mainmenuid: "wrapper", //menu DIV id
并交换CSS样式：
#smoothmenu1 { /* This used to be .ddsmoothmenu */
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
#wrapper {
position: relative;
float: left;
left: 50%;
}
#innerul {
position: relative;
left: -50%;
}
您将获得所需的结果。请参阅：http://jsbin.com/anaho/。
PS：考虑使用另一个插件。这个的代码质量非常坏，而且它不是很灵活。
答案 1 :(得分：1)
保证金左：汽车; 余量右：汽车;
答案 2 :(得分：1)
打开ddsmoothmenu.js并搜索zIndex并更改
zIndex: 100-i
到
zIndex: 9999-i
另外，打开ddsmoothmenu.ccs并在前两项添加z-index:9999;。
答案 3 :(得分：-1)
丑陋但它有效：
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="0%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="Default.aspx">Home</a></li>
<li><a href="About.aspx">About Us</a></li>
<asp:Literal runat="server" ID="topNav"></asp:Literal>
</ul>
<br style="clear: left" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>