html - ie6 および 7 のフロートの最後の li 要素をクリアする

Question

メニューには次のhtmlがあります

<ul>
    <li id="btnHome"><a href="#">Link One</a></li>
    <li id="btnAbout"><a href="#">Link Two</a></li>
    <li id="btnContact"><a href="#">Link Three</a></li>
    <li id="btnLinks"><a href="#">Link Four</a></li>
</ul>

以下は私のcssです

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style-type: none;
}

#nav {
    background: #999;
    padding: 2%;
}

#nav ul li {
    float: left;
    margin-right: 2%;
}

リンクを 1 行に表示するために、上記の IE6 および 7 を使用します。float: leftメニュー項目を一列に表示しますが、div のスタイルも変更し、#navメニュー項目は#navdiv 内に表示されなくなります。

IE6 および 7 でこの問題を解決するにはどうすればよいですか?

注：私はdisplay: inline-block最新のブラウザを使用していますが、これは正常に機能します。