Why does my drop down navigation menu wrap and drop onto a 2nd line?

[rb1234567]

I am having trouble getting my drop down navigation menu to work. The main issue is when I zoom out in Google Chrome, the menu starts wrapping and dropping to a 2nd line, causing all other divs on the page to wrap too.

I have searched across the internet to find a solution but nothing seems to work. Thanks for your advice.

Html:

<div id="nav">
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Quality</a></li>
   <li><a href="#">Processes</a></li>
   <li><a href="#">Markets</a></li>
   </ul>
   <ul>
   <li><a href="#">Products</a>
   <ul>
   <li><a href="#">Product information</a></li>
   <li><a href="#">Product number one submenu</a></li>
   <li><a href="#">Product number two submenu</a></li>
   <li><a href="#">Product 3</a></li>
   <li><a href="#">Product 4</a></li>
   <li><a href="#">Product num 5</a></li>
   <li><a href="#">Products 6, more & products</a></li>
   <li><a href="#">Prod numb Seven</a></li>
   <li><a href="#">More products eight</a></li>
   <li><a href="#">More prods, prods and products</a></li>
   <li><a href="#">prod Stock List</a></li>
   </ul>
    </li>
    </ul>
    <ul>
   <li><a href="#">News</a>
   <ul>
   <li><a href="#">Latest news</a></li>
   <li><a href="#">Case Studies</a></li>
   <li><a href="#">Testimonials</a></li>
   </ul>
   </li>
   </ul>
   <ul>
   <li><a href="#">Contact</a>
   <ul>
   <li><a href="#">Contact us</a></li>
    <li><a href="#">Directions</a></li>
   </ul>
   </li>
  </ul>
  </div>

css:

 #nav {
background-color:#14c64a;
height:37px;
width:960px;
}

   #nav ul {
   font-family: Arial, Verdana;
   font-size: 14px;
   margin: 0;
      padding: 0;
    list-style: none;
white-space:nowrap;
    }

    #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 5px 15px;
    background: #14c64a;
    margin-left: 1px;
    white-space: nowrap;
line-height:27px;
}

#nav ul li a:hover {
background: #666;
}

#nav li:hover ul {
display: block;
position: absolute;
}

#nav li:hover li {
float: none;
font-size: 11px;
}

#nav li:hover a { background: #14c64a; }

#nav li:hover li a:hover {
    background: #1e7c9a;
}

This a fiddle someone created for me to help you test my code instantly.
http://jsfiddle.net/MrLister/Sm42N/

[iamthwee]

Seems ok to me...

[JorgeM]

It looked Ok to me as well, unless I'm not understanding what you mean by zoom. I changed the "zoom" settings on my browser and also adjusted the size of the browser window. Didnt see any issues with regard to wrapping.