html - 下拉菜单宽度 100%

Question

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

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

HTML(示例)

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

CSS

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

Answer 1

通过将一些宽度设置为 100%，我想我成功了:

http://jsfiddle.net/Qcny6/

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