Scalable menu bar

Hey,

Ive been trying to sort a menu bar on a site I’m designing at the minute. The bar works as a navigation bar at the top of the site coded with CSS.
The only problem is when I zoom in on the bar the different headings will move onto a second line which I don’t really want.

Is there any way I can stop it?
I’ve done some looking around but I have yet to find something that fits the bill. Sorry if its an easy problem, maybe my searching skills aren’t quite up to scratch.

I think I a missing a line of code or just an incorrect value that is causing the problem, I’m not sure I’m new at the art and tinkering with value isn’t getting very far.

This is what I have for just the navigation bar,

[CODE]/* Nav Row */

#nav {
float: left;
width: 100%;
margin: 0;
list-style: none;
background: #404530;
}

#nav li {
float: left;
margin: 0 2px 0 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 100%;
background: #404530 url(nav_bg.gif) repeat-x bottom;
list-style:none;
}

#nav a {
float: left;
display: block;
margin: 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #404530;
border-bottom: none;
background: url(off_bg.gif) repeat-x top left;
list-style: none;
}

#nav a:hover {
color: #404530;
padding-bottom: 2px;
border-color: #404530;
background: #ffffff url(on_bg.gif) repeat-x top left;
list-style: none;[/CODE]

Its situated at the top of the screen just below a header.
So is there any way of stopping it moving over to a second line?

Thanks ?

Also in #CSS _↴