El diseño de menú funciona en todos los navegadores EXCEPTO iPhone

Question

Tengo un menú muy similar al menú aquí en StackOverflow. El problema es que mi menú se ve bien en cada navegador en el que lo he probado, EXCEPTO para mi iPhone.

Aquí está una captura de pantalla del iPhone

Ahora, obviamente el botón "Añadir evento" se supone que es del mismo tamaño que el resto.

Aquí es mi marcado

 <div id="menucontainer"> 
      <div class="floatleft"> 
       <ul class="menu"> 
        <li><%: Html.NavigationLink("Now", "Index", "Events")%></li> 
        <li><%: Html.NavigationLink("Coming", "Coming", "Events")%></li> 
        <li><%: Html.NavigationLink("Hot", "Hot", "Events")%></li> 
        <li><%: Html.NavigationLink("Tags", "Index", "Tags")%></li> 
        <li><%: Html.NavigationLink("Users", "Index", "Users")%></li> 
       </ul> 
      </div> 
      <div class="floatright"> 
       <ul class="menu"> 
        <li><%: Html.NavigationLink("Add Event", "AddEvent", "Events")%></li> 
       </ul> 
      </div> 
     </div> 

Y aquí está mi CSS

#menucontainer{position:relative; width:675px; float:right;} 
ul.menu 
{ 
    padding: 0 0 2px; 
    position: relative; 
    margin: 0; 
} 

ul.menu li 
{ 
    display: inline; 
    list-style: none; 
} 

ul.menu li a 
{ 
    padding: 8px 18px; 
    font-weight: bold; 
    text-decoration: none; 
    line-height: 2.8em; 
    background-color: #666; 
    color: #fff; 
    border: 1px solid black; 
    text-shadow:#000 0px 1px 1px; 
} 

ul.menu li a.youarehere 
{ 
    background-color:@brand_color; 
    color: #fff; 
} 

ul.menu li a:hover 
{ 
    background-color:@brand_color; 
    text-decoration: none; 
} 

ul.menu li a:active 
{ 
    background-color:@brand_color; 
    text-decoration: none; 
} 

ul.menu li.selected a 
{ 
    background-color:@brand_color; 
    color: #000; 
} 
.floatright 
{ 
    float: right; 
} 
.floatleft 
{ 
    float: left; 
} 

Lamentablemente no puedo imaginar éste. Gracias de antemano por cualquier dirección.

EDIT:

Este es el resultado final que se envía al navegador

 <div id="menucontainer"> 
      <div class="floatleft"> 
       <ul class="menu"> 
        <li><a class="youarehere" href="/">Now</a></li> 
        <li><a href="/events/coming">Coming</a></li> 
        <li><a href="/events/hot">Hot</a></li> 
        <li><a href="/tags">Tags</a></li> 
        <li><a href="/users">Users</a></li> 
       </ul> 
      </div> 
      <div class="floatright"> 
       <ul class="menu"> 
        <li><a href="/events/addevent">Add Event</a></li> 
       </ul> 
      </div> 
     </div> 

EDIT:

Reproducción sobre jsbin
http://jsbin.com/akadi3/2 (nota: es obvio que necesita el navegador de iOS para ver el problema)

Answer 1

Ok, entonces después de MUCHO juguetear, parece como si agregara un height atribuye al menucontainer, entonces estoy todo bien.

#menucontainer 
{ 
    position:relative; 
    width:675px; 
    height:40px; /* this fixed the problem */ 
    float:right; 
    font-size:80%; 
}