Html 下拉菜单宽度100%

努力寻找这个问题的答案。我们已经为一个基本的下拉菜单创建了一些html/css代码，但是很难使它适合现有的宽度结构

基本上我的网站宽度约为900px，我希望这个菜单正好适合。然而，目前它很短（FF上的像素很少，IE上的像素更多），因为我没有足够多的菜单，并且一直在使用“&”来接近它。有没有一种方法可以在末尾添加一个固定的块（有点像一个假菜单），或者更好的是，添加一个100%的背景色（或者固定的像素宽度）？我不介意它在最右边是一种固体颜色。希望这是有道理的

HTML（示例）

CSS

#导航ul{
字体系列：Tahoma、Verdana、Helvetica、Arial、无衬线字体；
字体大小：11px；
字体大小：粗体；
保证金：0；
填充：0；
列表样式：无；
}
#李国荣{
显示：块；
位置：相对位置；
浮动：左；
}
#纳夫利乌尔{
显示：无；
}
#海军ulli a{
显示：块；
文字装饰：无；
颜色：#ffffff；
填充：5px15px 6px 15px；
背景：#2a8bc6；
空白：nowrap；
背景：url（'images/menu_off.gif'）100%0重复-x；
}
#悬停，悬停{
背景：#56595c；
}
#nav li:hover ul，#nav li.sfhover ul{
显示：块；
位置：绝对位置；
z指数：3；
}
#导航李：悬停李，#导航李{
浮动：无；
字体大小：12px；
字体大小：正常；
边框顶部：1px实心#959a9d；
}
#导航李：悬停a，#nav li.sf悬停a{
背景：#56595c；
不透明度：0.9；
}
#导航李：悬停李a：悬停，#nav li.sfhover李a.sfhover{
背景：#2a8bc6；
}

通过将一些宽度设置为100%，我认为我做到了：

---

看一看，让我知道它是否是您所期望的

我随后添加了一个临时修复程序，在末尾（原始div之后）添加了一个小背景图像，并使用repeat-x代码，如下所示。它在我尝试过的所有浏览器中都能工作，这很好，但我不知道这是否是最好的方法？在我的特定网站上还注意到，FF中11px的字体大小略大于IE中的字体大小，这意味着我使用的实际背景图像（带缓冲区）在FF中为26px，在IE中为24px。任何关于如何将背景图像固定为确切大小的想法，正如我所知，设置字体大小都不那么容易

用于加载项的代码：

HTML

---

CSS中的块级元素会自动填充其容器。如果我理解你的问题，你同意菜单右侧有纯色。因此，基本上，您希望将菜单放入容器中，使菜单跨越整个宽度，但不一定具有相等的菜单项宽度。如果是这样的话，我使用了一个jsfiddle来展示如何在css中的子菜单上添加下/右箭头，并展示了如果它位于某个宽度的容器中，它将如何填充整个容器。您可以通过更改CSS中#existingContainer项的宽度来测试这一点。您将看到灰色条（与菜单关联）延伸以填充整个空间

---

这可能行得通是的，但问题是我经常必须更改顶部菜单的数量，因此基于3个顶部菜单的33%可能并不总是这样。我一直在寻找一个简单的选项，即在末尾添加一个背景块，而不是使每个顶部菜单的大小相同（百分比），因为如果有意义的话，某些文本会比其他文本大得多。

<table cellpadding="5" cellspacing="0" width="100%" border="0">
    <tr>
        <td>
            <div id="nav">
                <ul>
                    <li><a href="" title="">Link 1</a></li>
                    <li><a href="" title="">Link 2</a>
                        <ul>
                            <li><a href="" title="">Link 2-1</a></li>
                            <li><a href="" title="">Link 2-2</a></li>
                            <li><a href="" title="">Link 2-3</a></li>
                        </ul>
                    </li>
                    <li><a href="" title="">Link 3</a>
                        <ul>
                            <li><a href="" title="">Link 3-1</a></li>
                            <li><a href="" title="">Link 3-2</a></li>
                            <li><a href="" title="">Link 3-3</a></li>
                            <li><a href="" title="">Link 3-4</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</table>

#nav ul {
    font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav ul li {
    display: block;
    position: relative;
    float: left;
}
#nav li ul {
    display: none;
}
#nav ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 15px 6px 15px;
    background: #2a8bc6;
    white-space: nowrap;
    background: url('images/menu_off.gif') 100% 0 repeat-x;
}
#nav ul li a:hover, #nav ul li a.sfhover {
    background: #56595c;
}
#nav li:hover ul, #nav li.sfhover ul {
    display: block;
    position: absolute;
    z-index: 3;
}
#nav li:hover li, #nav li.sfhover li {
    float: none;
    font-size: 12px;
    font-weight: normal;
    border-top: 1px solid #959a9d;
}
#nav li:hover a, #nav li.sfhover a {
    background: #56595c;
    opacity: 0.9;
}
#nav li:hover li a:hover, #nav li.sfhover li a.sfhover {
    background: #2a8bc6;
}
<!--[if lte IE 8]>
#nav ul li {
    position: inherit;
}
<![endif]-->
<!--[if lte IE 7]>
#nav ul li {
    background: url(none);
}
<![endif]-->

<div id="navend"><img src="{$images_dir}/menu_off.gif" border="0" alt="" /></div>

#navend {
background: url('images/menu_off.gif') repeat-x;
}