Problème de zoom qui modifie le menu

Bonjour,

j'ai remarqué un problème sur mon menu horizontal fait avec des listes, lorsque je réduis le zoom de mon navigateur, les float qui compose se menu ne s'aligne plus !

J'aimerais savoir comment faire pour qu'importe le zoom (surtout réduit) mon menu reste le même.

Merci !!!

Les floats sont dans une div avec une width définie, je pense que le problème vient de là, mais c'est utile pour centre mon menu.

<div id="centre">
    <ul id="menu">
        <li class="nav1">
            <a href="#">Rubrique 1</a>
                <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                </ul>
        </li>
        <li class="nav2">
            <a href="#">Rubrique 2</a>
                <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                </ul>
        </li>
        <li class="nav3">
            <a href="#">Rubrique 3</a>
                <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                </ul>
        </li>
    </ul>
</div>

#centre{
    width: 800px;
    margin: 0 auto;
    padding: 0;
}
 
#ul{
    position: relative;
    width: 800px;
    margin: 0;
    padding: 0;
    display: block;
}
 
.nav1{
    float : left;
    width: 200px;
    margin: 0;
    padding: 0;
    display: block;
}
.nav2{
    float : left;
    width: 250px;
    margin: 0;
    padding: 0;
    display: block;
}
.nav3{
    float : left;
    width: 350px;
    margin: 0;
    padding: 0;
    display: block;
}