How to get horizontal menu to go to left when it's too big

Question

Hello all,

I've got a horizontal menu on my website: http://www.alcmariavictrix.nl When i browse it in small browsers (IPhone), the horizontal menu on top is screwed. What i want to perform is get that horizontal menu to the left when the browser can't display it all in one line.

Does anyone know how to do this? example:

The right way to do it

This is the think i don't want

This is how it should be done when it's wrong

Answer 1

This seems to achieve the desired effect for me (I don't have an iPhone, so I couldn't test in that environment):

#header {
background:transparent url(images/design/header_bg_home.png) no-repeat scroll right bottom;
clear:both;
height:325px;
width:960px;
position:relative; /* added */
}

#menu_horiz {
height:81px;
position:absolute; /* added */
right:24%;         /* added, tweak this value if needed */
/* removed: 
   float:left;
   margin-left:206px;
   width:542px; */
}