Меню на сайте сделано строкой, на некоторых ПК кнопки во второй ряд падают

В меню, кнопка "Контакты" уходит вниз (во второй рядок), не на всех мониторах



Вот хтмл код:

PHP:

<div class="menu-row">
                <div class="menu-border">
                    <div class="main">
                        <navi>
                            <ul id="nav">
                                <li><a href="index.php">Головна</a></li>
                                <li><a class="active" href="#"><font color="#ca4b00">Галерея</font></a>
                                <ul>
                                  <li><a class="active" href="__.php"><font color="#ca4b00">__</font></a></li>
                                  <li><a href="__.php">__</a></li>
                                  <li><a href="__.php">__</a></li>
                                  </ul>
                                </li>
                                <li><a href="advert.php">Оголошення</a></li>
                                <li><a href="#">Змагання</a>
                                  <ul>
                                  <li><a href="__.php">__</a></li>
                                  <li><a href="__.php">__</a></li>
                                  </ul>
                                </li>
                                <li><a href="#">Інформація</a>
                                  <ul>
                                  <li><a href="__.php">__</a></li>
                                  <li><a href="__.php">__</a></li>
                                  </ul>
                                </li>
                                <li><a href="contacts.php">Контакти</a></li>
                             </ul>   
                        </navi>
                    </div>
                </div>

Вот ксс:

PHP:

.menu-row {
    width:100%;
    padding:0;
    border-bottom:1px solid #fff;
    background:url(../images/menu-row-tail.gif) center top repeat-x #e6e6e6;
}
.menu-border {
    border-left:1px solid #fff;
    border-right:1px solid #fff;
}
 
#nav{
    float:left;
    width:100%;
    margin-bottom:4px;
    min-height:50px;
    background:url(../images/menu-row-tail.gif) center top repeat-x #e6e6e6;
}
#nav li{
    float:left;
    margin-right:4px;
    position:relative;
    background:url(../images/menu-row-tail.gif) center top repeat-x #e6e6e6;
    display:block;
}
#nav li a{
    display:block;
    font-family: 'Adamina', serif;
    font-size:20px; 
    line-height:2.5em; 
    letter-spacing:-1px;
    padding:5px 44px 4px 40px; 
    color:#000; 
    border-radius:2px;
    text-decoration:none;
}
#nav li a:hover{
    color:#ca4b00;;
    text-decoration:underline;
}
 
#nav li: active a{
    color:#ca4b00;;
    text-decoration:underline;
}
 
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
    opacity:0; /* Устнавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
     /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    float:none;
    background:url(../images/menu-row-tail.gif) center top repeat-x #e6e6e6;
}
#nav ul a{
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
    text-decoration:none;
    display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
    
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    color:#ca4b00;
    text-decoration:underline;
}
 
#nav li:hover ul li a:active{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    color:#ca4b00;
    text-decoration:underline;
}

Как сделать чтоб меню всегда было в одной строке и не "сьезжало"????

 

Уже все сделал.