css - IE7 Subnav、2 つのポジショニングの問題

Question

問題のサイト: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/

上記のリンクを IE7 でテストすると (私は IE9 を browsermode で使用し、IE7 のブラウザー互換性があります)、サブナビゲーションに配置の問題があります。

About us にカーソルを合わせ、次に home にカーソルを合わせて、About us に戻ります。サブナビゲーションが、その上の LI の幅だけ右に移動したことがわかります。

これは純粋に CSS でコーディングされています。これは、IE7 を除くすべてのブラウザーで完全に機能します。Javascript を修正せずに、CSS 内でこれを機能させ続けたいと思います。

z-index の問題もありますが、これら 2 つの問題に関するアイデアはありますか?

メインの UL と LI を処理する CSS コードと、最初の Subnav を処理する CSS を次に示します。("Michael" の下のセカンダリ サブナビゲーションは意図したとおりに機能することに注意してください)。

*** クラス .main-nav は、水平バーを処理する最初の UL に適用されることに注意してください。クラス .main-sub-nav は、サブナビゲーション LI の Michael、Kenny などを [About us] メニューの下に保持する UL に適用されます。

nav .main-nav {
    position: absolute; /* allows us to absolute position the subnavs */
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
    border: 1px solid #fff; /* Inner white border */
    -moz-border-radius: 5px; /*rounded edges */
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

nav ul > li {
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

/* MAIN NAV SUBNAV STYLES */

.main-sub-nav { /* BASIC STYLING PLUS HIDE */
    position: absolute;
    display: none;
    z-index: 1;
    width: 200px;
    height: auto;
    top: 100%;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > .main-sub-nav { /* ON HOVER MAKE SUB-NAV VISIBLE */
    display: block;
}

nav ul li .main-sub-nav li {
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}