html - 尝试将水平菜单栏从 1 行表格格式转换为无序列表格式

Question

目前，我的网站 (clubcatcher.com) 上有一个使用表格制作的精美顶部菜单。 (请原谅我的 ID 命名风格和代码格式，因为我想让用户下载尽可能少的不必要的空白字节。)

人们说，对于表格，页面上的所有其他内容都必须等待加载，直到表格中的所有内容都已完全加载，而其他人则认为使用表格不利于布局。

因此，我在站点的本地服务器副本上尝试了一种新方法，即为菜单使用无序列表。

在我的代码中，类 TS 代表选定的菜单项，类 TE 代表菜单的结尾，黑色背景上的小渐变(大约几个像素高)应该像您现在在真实网站上看到的那样显示.使用新设置，我没有得到与主体背景颜色相同的背景颜色，而不是黑色渐变。

然后我尝试从 TE 中删除 width:auto，渐变显示为一个与其余菜单项选项卡宽度相同但在下一行的框。

我尝试将 overflow:hidden 添加到 #TM 但没有成功。

我提到的所有图像都是从单个 Sprite 表加载的背景图像。我没有这么多的表格格式问题，但我想尝试另一种方式。也许无序列表与我正在做的不兼容？

我正在寻找也适用于 IE7 的解决方案。

这是我到目前为止想出的:

JsFiddle (此链接是由一位使用 jsfiddle 测试我的代码的成员插入的，因为我无法访问它。)

HTML:

<ul ID="TM">
<li><a href="url">menu item 1</a></li>
<li><a href="url">menu item 2</a></li>
<li class="TS"><a href="url">menu item 3</a></li>
<li><a href="url1">menu item 4</a></li>
<li><a href="url1">menu item 5</a></li>
<li><a href="url1">menu item n</a></li>
<li class="TE"> </li>
</ul>

CSS:

#TM LI{width:auto;float:left;display:block;margin:0;padding:0}
#TM {color:#FFF;background:#000;width:100%;margin:0;padding:0}
#TM .TE{width:auto;background:#000;color:#FFF;background:0 -112px}
#TM .TS{color:#000;background:#FF0 center -214px}
#TM LI A{background-color:#EEE;color:#000;height:20px;width:60px;margin:auto;display:block}
#TM LI{padding-bottom:0;width:100px;height:49px;color:#FFF;background:#000 center -163px no-repeat}

更新

以下是直接从实时 HTML 中获取的工作代码。我在这里所做的唯一修改是用点替换需要背景 Sprite 的不相关元素，因为它不适用于问题。

工作代码的 HTML:

<table ID="TM">
<tr>
<td><a href="http://collage-editor.clubcatcher.com/">Collage +Editor</a></td>
<td><a href="http://live-events.clubcatcher.com/">LIVE Events</a></td>
<td><a href="http://pictures.clubcatcher.com/">Photo Albums</a></td>
<td><a href="http://thenew.clubcatcher.com/social">Social Circle</a></td>
<td><a href="http://thenew.clubcatcher.com/order">Online Orders</a></td>
<td><a href="http://help.clubcatcher.com/">Find Answers</a></td>
<td><a href="http://thenew.clubcatcher.com/index2.php?A=GETOUT">Logoff</a></td>
<td class="TE"></td>
</tr>
</table>

工作代码的 CSS:

#TM {color:#FFF;background:#000;width:100%;border-collapse:collapse;border:0}
#TM .TE{background:#000;color:#FFF;background:0 -112px}#TM .TS{color:#000;background:#FF0 center -214px}
#TM TD A{background-color:#EEE;color:#000;height:40px;width:60px;margin:auto;display:block}
#TM TD{padding-bottom:0;width:160px;height:49px;color:#FFF;background:#000 center -163px no-repeat}
#TM TD,#TM .TS,#TM .TE,...{background-image:url('http://i.clubcatcher.com/dcB')}

Answer 1

这对你有用吗？

HTML:

<table ID="TM">
<tr>
<td><a href="http://collage-editor.clubcatcher.com/">Collage +Editor</a></td>
<td><a href="http://live-events.clubcatcher.com/">LIVE Events</a></td>
<td><a href="http://pictures.clubcatcher.com/">Photo Albums</a></td>
<td><a href="http://thenew.clubcatcher.com/social">Social Circle</a></td>
<td><a href="http://thenew.clubcatcher.com/order">Online Orders</a></td>
<td><a href="http://help.clubcatcher.com/">Find Answers</a></td>
<td><a href="http://thenew.clubcatcher.com/index2.php?A=GETOUT">Logoff</a></td>
<td class="TE"></td>
</tr>
</table>

CSS:

#TM {color:#FFF;background:#000;width:100%;border-collapse:collapse;border:0}
#TM .TE{background:#000;color:#FFF;background:0 -112px}#TM .TS{color:#000;background:#FF0 center -214px}
#TM TD A{background-color:#EEE;color:#000;height:40px;width:60px;margin:auto;display:block}
#TM TD{padding-bottom:0;width:160px;height:49px;color:#FFF;background:#000 center -163px no-repeat}
#TM TD,#TM .TS,#TM .TE,...{background-image:url('http://i.clubcatcher.com/dcB')}