Jag har en lista i en div

html
<code>
<div id="Menu">
<ul>
<li><a hrewf="">1</a></li>
<li>2</li>
<li>3</li>
</ul>
</div>
</code>

css
<code>
#Menu
{
display: block;
float: left;
height: 30px;
width: 948px;
margin-top: -45px;
padding: 7px 0 0 50px;
white-space: nowrap;
overflow: visible;
}

#Menu ul
{
padding: 0px;
margin: 0px;
}

#Menu ul li
{
display: inline;
float: left;
list-style-type: none;
}

#Menu ul li a
{
display: block;
background: url(../Images/Tab.png) no-repeat;
width: 160px;
height: 40px;
text-align: center;
padding-top: 10px;
margin-right: 11px;
font-size: 110%;
text-decoration: none;
color: #3b5e6b;
font-weight: bold;
}
</code>

Vad jag vill göra är att ifall menyn blir så lång att den inte får plats i DIVen så ska innehållet ändå fortsätta utanför den. Men som det är nu med ovanstående kod så bryts raden och börjar på en ny (I opera och firefox). Orkar inte testa i IE innan det funkar i de riktiga webbläsarna först.

För att hålla det så simpelt som möjligt tog jag inte med all kod. Den ovanstående #Menu-diven ligger i en annan div med samma bredd som är centrerad på sidan. Tror dock inte det borde spela någon roll ?