css - prevent menu word-wrapping

Question

I've created this menu with css. But it wraps if the width of the window is smaller than then entire menu.

How do you stop it from wrapping to the next line?

see code. http://jsfiddle.net/49RCL/1/

<nav>    
    <ul class="siteNav">    
         <li><a href="http://cnn.com"><img src="http://s7.postimg.org/m54vbq4kn/logo.png" width="166" height="60"</a></li>    
        <li><a href="http://cnn.com">Menu 1</a></li>    
        <li><a href="http://cnn.com">Menu 2</a></li>    
        <li><a href="http://cnn.com">Menu 3</a></li>    
        <li><a href="http://cnn.com">Menu 4</a></li>    
        <li><a href="http://cnn.com">Menu 5</a></li>    
        <li><a href="http://cnn.com"><form action=""><input type="color" name="favcolor" size="26" placeholder="Search"></form></a></li>    
    </ul>    
</nav>

Answer 1

add

white-space: nowrap;

to your .siteNav

http://jsfiddle.net/URL4g/