如何使导航菜单保持原位

Question

When structuring a navigation menu with an UL(unordered list), I've noticed when I zoom in and out of the page the list items shift to the right making them come out of line. How do make them stay in the same place at all times?

I have added the following at JSFiddle to play with it.

<div id="navigation">
                     <ul>
                            <font face="Verdana, Geneva, sans-serif">
                            <li > <a href="../index.html" > ANA SƏHIFƏ </a> </li>
                            <li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li>
                            <li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
                            <li><a> KİTABLAR </a></li>
                            <li> <a> VİDEOLAR </a> </li>
                            <li> <a id="last-item">FOTOLAR</a> </li>
                            </font>
                     </ul>
#navigation {
    width: 900px;
    margin: 0 auto 0px;
}

div#navigation ul li {
    font-size:9px;
    list-style:none;
    background-color:transparent;
    background-color:#FFF;
    float: left;
}
div#navigation ul li:hover {
    background-color:#9C1A35;
}
div#navigation ul li a {
    color:#333333;
    text-decoration:none;
    display: block;
    padding:10px 43px 20px;
}
#navigation ul li a:hover {
    color:#fff;
}
ul {
    padding:0;
}
#active-li {
    background:#9C1A35 !important;
}
#active-li a {
    color:#fff !important;
}
#last-item {
    padding: 10px 42px 20px 42px !important;
}
div#navigation ul li #active {
    background:#9C1A35 !important;
}
div#navigation ul li #active a {
    color:#fff;
}

Answer 1

Most of pages loses their layout when zooming excessively. This happens when the "zoom only texts" option is enabled in the browser. here is my suggestions:

• decrease padding-right and padding-left of <a> items to a lower value (43px is too much for your menu).
• try giving a height , min-height and max-height to your items, and set overflow:hidden . This way, the text will stay in it's container box, and won't run out of it.
• use relative values (percent, em) instead of px to size your elements.

Answer 2

#navigation { width: 900px; margin: 0 auto 0px; display: inline; }

Answer 3

Figured out a new way to make the nav bar stay in place

<div id="navigation">
                         <ul>
                                <font face="Verdana, Geneva, sans-serif">
                                <li > <a href="../index.html" > ƏSAS SƏHİFƏ </a> </li>
                                <li> <a href="../Biography/BiographyAZ.html"> BIOQRAFIYA </a> </li>
                                <li id="active-li"> <a href="#"> XƏBƏRLƏR VƏ HADISƏLƏR </a></li>
                                <li><a href="../Books/booksAZ.html"> KİTABLAR </a></li>
                                <li> <a> VİDEOLAR </a> </li>
                                <li> <a id="last-item">FOTOLAR</a> </li>
                                </font>
                         </ul>
                  </div>

    #navigation {
        width: 900px;
        margin: 0 auto 0px;
    }
    div#navigation ul li {
        font-size:9px;
        list-style:none;
        background-color:transparent;
        background-color:#FFF;
        float: left;
        width:150px;
        height:40px;
        text-align:center;
    }
    div#navigation ul li:hover {
        background-color:#9C1A35;
    }
    div#navigation ul li a {
        color:#333333;
        text-decoration:none;
        display: block;
        padding:6px 0px 18px;
        border-left:1px thin black;
        border-right:1px thin black;
    }
    #navigation ul li a:hover {
        color:#fff;
    }
    ul {
        padding:0;
    }
    #active-li {
        background:#9C1A35 !important;
    }
    #active-li a {
        color:#fff !important;
    }
    div#navigation ul li #active {
        background:#9C1A35 !important;
    }
    div#navigation ul li #active a {
        color:#fff;
    }