Html 导航条以不同的缩放比例下降为两行

我已经做了一个导航条，在我的默认缩放喜欢罚款，但在放大或缩小它下降到两行，完全破坏了它

你知道如何阻止这种事情发生吗？ 任何帮助都将不胜感激， 这是HTML

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="generalGuidance.html">General Guidance</a></li>
        <li><a href="whyGrow.html">Why grow?</a></li>
        <li><a href="usefullSites.html">Usefull Sites</a>
            <ul>
                <li><a href="http://www.bbc.co.uk/gardening/">BBC Gardening</a></li>
                <li><a href="http://www.channel4.com/4homes/rooms/outdoors/garden-grow-your-own">Channel Four Gardening</a></li>
                <li><a href ="http://ngb.org/gardening_links/index.cfm">National Garden</a></li>    
            </ul>
        </li>
        <li><a href="carrot.html#bottom">How To Grow</a> <!--Links to the bottom of the how to grow carrots page -->
            <ul>
                <li><a href="carrot.html">Carrots</a></li>
                <li><a href="turnip.html">Turnips</a></li>
                <li><a href="radish.html">Radishs</a></li>
                <li><a href="parsnip.html">Parsnips</a></li>
                <li><a href="leek.html">Leeks</a></li>
                <li><a href="onion.html">Onions</a></li>
            </ul>
        </li>   
        <li><a href="Forums">Forums</a></li>
    </ul>
</nav>

试试看

nav {
    max-width: 100%;  /*Edit*/
    width: 1000px;
}

nav ul {
    background-color: #3C7F1E;
    border-radius: 10px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
    display: inline-block;
    list-style: none outside none;
    margin: 0 auto;
    max-width: 100%;     /*Edit*/
    padding: 0;          /*Edit*/
    position: relative;
    width: 960px;
       }

---

这修复了nav ul li{float:left；width:160px；}尽管它看起来没有以前那么好，因为文本现在分成两行。

nav {
    max-width: 100%;  /*Edit*/
    width: 1000px;
}

nav ul {
    background-color: #3C7F1E;
    border-radius: 10px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
    display: inline-block;
    list-style: none outside none;
    margin: 0 auto;
    max-width: 100%;     /*Edit*/
    padding: 0;          /*Edit*/
    position: relative;
    width: 960px;
       }