html - html 和 css 中的菜单效果不佳

Question

我正在尝试用 css 和 html 制作一个菜单。我不知道我最终要使用哪种尺寸，所以我做了一个菜单，它可以是我想要的任何水平和垂直尺寸，但我有一个问题。由于某种原因，菜单的右侧被隐藏了。

HTML:

<table>
        <tr>
                <td id="menu_top_left"></td><td id="menu_top_center"></td><td id="menu_top_right"></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 1</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 2</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 3</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 4</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 5</a></td>
        </tr>
        <tr id="menu_center">
                <td colspan="2"><a href="#">Link 6</a></td>
        </tr>
        <tr>
                <td id="menu_bot_left"></td><td id="menu_bot_center"></td><td id="menu_bot_right"></td>
        </tr>
</table>

CSS:

table{
        width:200px;
        border-spacing:0;
}
table tr #menu_top_left{
        width:20px;
        height:20px;
        background:url(top_left.png);
}
table tr #menu_top_center{
        width:160px;
        height:20px;
        background:url(top_center.png) repeat-x;
}
table tr #menu_top_right{
        width:20px;
        height:20px;
        background:url(top_right.png) repeat-x;
}
table #menu_center{
        background:url(center_center.png) repeat;
        text-align:center;
}
table tr #menu_bot_left{
        width:20px;
        height:20px;
        background:url(bot_left.png);
}
table tr #menu_bot_center{
        width:160px;
        height:20px;
        background:url(bot_center.png) repeat-x;
}
table tr #menu_bot_right{
        width:20px;
        height:20px;
        background:url(bot_right.png) repeat-x;
}

隐藏的右侧部分应该与未隐藏的左侧部分一样。我找不到修复它的方法。
希望有人能帮我修好，谢谢。抱歉我的英语不好..

Answer 1

首先，您不应该使用表格进行格式化；它们用于显示表格数据。您的导航链接实际上只是列表中的元素，因此请改用

和
• 标签。您可以在标签内包含这些元素。

  其次，当您确实不需要时，您会使用图像。你想实现:

  • 红色单像素边框
  • 圆 Angular
  • 容器周围发出红色“光”。

  您可以使用以下 CSS 属性获得所有这三种效果:

  • > border
  • > border-radius
  • > box-shadow

  编辑:这是一个实际的例子。你会发现这样做是多么容易:)

  http://jsfiddle.net/ntwiles/9Qv3h/

  d