Menu bị tràn xuống khi thêm

Hi mọi người,

Mình đang học css và đang tập css 1 trang web.Trang của mình hiện tại có thanh menu có 5 cái.Khi mình thêm 1 cái nữa thì menu ở cuối sẽ bị tràn xuống dưới. Code của mình:

Trang html:

Code:

<div id="nav-container">
       <nav id="main-menu">
        <ul id="top-nav">
            <li class="current">
                <a href="/index.html" title="Home">Home</a>
            </li>
                        <li>
                <a href="/index.html" title="Home">Home</a>
            </li>
            <li>
                <a href="/lien-he.html" title="Liên hệ">Liên hệ </a>
            </li>
        </ul>
        
        </nav> 
  </div>

Css:

Code:

#nav-container{float:left;width:610px;height:110px}

#main-menu{float:left;width:600px;height:40px;margin-top:30px;background:url(../images/nav_bg.png) 0 0 no-repeat;padding:5px}

ul#top-nav{float:left;height:40px;position:relative;z-index:32;padding:0}

ul#top-nav li{float:left;height:40px;position:relative;background:url(../images/nav_divider.png) right center no-repeat;margin:0;padding:0 10px 0 8px;display: inline-block}

Mọi người có giải pháp gì giúp mình với

Thanks mọi người !