Html 尝试将水平菜单栏从一行表格格式转换为无序列表格式

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

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

因此，我正在尝试一种新的方法，在本地服务器上使用无序列表作为菜单

在我的代码中，类TS表示所选的菜单项，类TE表示菜单的结尾，黑色背景上的一个小渐变（大约几像素高）应该显示与您现在在真实站点上看到的一样。使用新的设置，而不是黑色渐变，我在与身体背景色相同的背景色上什么也得不到

然后，我尝试从TE中删除

width:auto

，渐变显示为一个与其他菜单项选项卡宽度相同的框，但位于下一行

我尝试将

overflow:hidden

添加到

#TM

中，但没有成功

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

我正在寻找一个同样适用于IE7的解决方案

这就是我到目前为止的想法：

（这个链接是由一位成员插入的，他用JSFIDLE测试了我的代码，因为我无法访问它。）

HTML:

更新

以下是直接取自live HTML的工作代码。我在这里做的唯一修改是用点替换需要背景精灵的无关元素，因为它不适用于这个问题

工作代码的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>

#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')}

---

这对你有用吗

HTML:

---

我的电脑太旧了，无法正确使用JSFIDLE。我发布的最新代码，您再次发布的代码确实有效。我试图在不使用表格来制作菜单的情况下获得相同的结果。JS fiddle是否按照您的意愿显示？我无法在我的计算机上正确访问JSFIDLE站点，而且我希望使其与尽可能多的浏览器兼容（至少与IE7一样旧）请随意展示您所获得的，我会看看是否也能为IE7做些什么。这：

<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>

#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')}

<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>

#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')}