問題のサイト: 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;
}