Drop down menu width 100%

Question

Struggling to find an answer to this one. Have created some html/css code for a basic drop-down menu, but struggling to make it fit an existing width structure.

Basically my site width is approx. 900px and would like this menu to fit that exactly. However, it is short at the moment (few pixels on FF and even more on IE) because I don't have enough menus across and have been using '&'s to get it closer. Is there a way in which I can add a fixed block on the end (kind of like a fake menu), or better still, a background colour that is 100% (or a fixed pixel width)? I don't mind that it might be a solid colour at the far right hand side. Hope that makes sense.

HTML (example)

<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

by seeting some width to 100%, I think I did the trick:

http://jsfiddle.net/Qcny6/

Have a look and let me know if it is what you expected to be

Answer 2

I've subsequently added a temp fix by adding a small background image at the end (after the original div) with a repeat-x code as follows. It works in all browser I've tried which is nice, but I don't know if this is the best approach? Also noticed on my specific site that the font size of 11px is slightly larger in FF than in IE, which means that the actual background image I'm using (with buffer) is 26px in FF and 24px in IE. Any idea how to fix the background image to the exact size as I know setting font sizes isn't as easy.

Code used for the add-on:

HTML

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

CSS

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

Answer 3

Block level elements in CSS automatically fill their containers. If I understand your question, your ok with there being a solid color to the right hand side of the menu. So, basically, you want to drop a menu into a container and have the menu span the entire width, but not necessarily having equal menu item widths. If that's the case, I took a jsfiddle I used earlier for showing how to add down/right arrows on sub menu's in css and showed how if it sits in a container of some width, it will indeed fill the entire container. You can test this by changing the width of the #existingContainer item in the CSS. You'll see that the gray bar (which is associated with the menu) extends to fill that entire space.

http://jsfiddle.net/w9xnv/3/