html - 导航以较低的分辨率转到下一行

Question

这是CSS：

#module{position: relative; z-index: 1001; width: 1024px; margin: 0 auto; display: block;}
#module:after{clear: both; display: block; content: "."; line-height: 0; height: 0;    visibility: hidden; overflow: hidden;}
.top-menu{display: -moz-box; margin: 0; padding: 0; clear: both;}
.top-menu ul{float: left; list-style: none; background: #00AAAA; margin: 0; padding: 0; display: inline;}
.top-menu ul li{display: inline; margin: 0; padding: 0;}
.top-menu ul li a{display: block; float: left; width: 139px; margin: 0; padding: 6px 0; font: 20px "Consolas, Calibri, Arial"; text-align: center; border-right: 1px solid 006666; color: #ffffff; text-decoration: none;}
.top-menu ul li a.last{width: 43px;}
.top-menu ul li a:hover{background: #006666;}
.top-menu ul li a.active, .top-menu ul li a.active:hover{background: #000000;}

这是html：

<div class="top-menu" id="module">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
<li><a class="last" href="#">?</a></li>
</ul>
</div>

我在降低分辨率时遇到了这个问题，它出现在下一行（最后一行）。