Prevent div containing CSS menu from wrapping without breaking menu dropdowns
===

I'm implementing a menu based on this one:

http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx

([Demo][1])

The menu uses a UL / LI structure and CSS for appropriate rendering.

The trouble is, if the browser is not wide enough, the main menu items wrap.

![Menu wrapping][2]

I have surrounded the menu in a DIV.

When I apply 

    overflow-x: auto;

to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).

How can I prevent the DIV from wrapping while retaining the drop-down menus?


  [1]: http://www.jankoatwarpspeed.com/examples/vimeo_navigation/
  [2]: http://i.stack.imgur.com/W0eFt.png