Horizontal Menu Shift problem

[PomPomMan]

First of all I'm just starting to learn , I been working on my first web project but I stumble the problem with my horizontal menu, every time I zoom out the last menu just shift/collapse to the next line, this happen only at Firefox, mozilla, and opera, as for IE9 the menu is perfectly fine

HTML :

<div class="horizon-menu">
<ul class="navi">
 <li class="menu product border_menuL" onmouseover=""><span class="menutitle">Product</span>
   <ul>
      <li><a href="">Lorem ispum</a></li>
      <li><a href="">Lorem ispum</a></li>
   </ul>
  </li>
  <li class="menu application border_menuR border_menuL" onmouseover=""><span class="menutitle">Application</span>
    <ul>
       <li><a href="">Lorem ispum</a></li>
       <li><a href="">Lorem ispum</a></li>
    </ul>
</li>
<li class="menu support border_menuR" onmouseover=""><span class="menutitle">Support</span>
     <ul>
       <li><a href="">Lorem ispum</a></li>
       <li><a href="">Lorem ispum</a></li>
      </ul>
</li>
<li class="menu about border_menuR" onmouseover=""><span class="menutitle">About</span>
      <ul>
        <li><a href="">Lorem ispum</a></li>
        <li><a href="">Lorem ispum</a></li>
      </ul>
</li>
<li class="menu buy border_menuR" onmouseover=""><span class="menutitle">Contact Us</span>
       <ul>
         <li><a href="">Lorem ispum</a></li>
         <li><a href="">Lorem ispum</a></li>
       </ul>
</li>
<div style="clear:both;"></div>
</ul>	
</div><!--horizon-menu-->

CSS :

.horizon-menu {
	width:760px;
	position:relative;
}
ul li{
	list-style:none;padding:0;margin:0;
	background-color:red;
}
div.navi-background {width:760px; height:32px; position:absolute; z-index:-1; background:transparent url('../image/horizontal-menu_02.png') repeat-x top right;}
ul.navi  {width:760px;position:relative;}
ul.navi li.menu {padding:9px 0;position:relative;width:148px;height:15px;}
ul.navi li.buy {width:160px;}
ul.navi li.menu span{font-size:0.8em;font-weight:bold;}
ul.navi  li ul{display:none;font-size:0.7em;}	
ul.navi a{display:block;}
ul.navi li.menu {float:left;text-align:center;}
ul.navi li ul {position:absolute;text-align:left;margin-top:8px;}
ul.navi li:hover ul {display:block;}
ul.navi li:hover {background: transparent url('../image/horizontal-menu_selected.png') repeat-x top right;}
ul.navi li ul li ul.submenu {display:none!important;position:absolute;right:150px;top:-10px;width:150px;background-color:yellow;}
ul.navi li ul li:hover ul.submenu {
	display:block!important;
}
ul.navi li ul li ul.submenu li {
	position:relative;
}
.border_menuR {
	border-right:1px solid #660000;
}
.border_menuL{
	border-left:1px solid #660000;
}

Really Appreciate everyone can enlighten me! Thanks