1

スタイルシートを IE7 用に最適化する作業はほぼ完了しましたが (これまでに行ったのは初めて)、まだ 1 つの問題があります。IE8 + を含む他のすべてのブラウザーでは完全に正常に動作するドロップダウン メニューがありますが、IE7 では正しく配置されていません。何らかの理由で、サブメニューが次のメニュー項目の下に配置されます。例えば; アイテム 1 のサブメニューはアイテム 2 の下に配置され、アイテム 2 のサブメニューはアイテム 3 の下に配置されます。

これが私のHTMLです（部分）：

<div id="main_nav">
<ul id="main_nav_list">
   <li><a href="#">START</a>
<ul>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Twee</a></li>
    <li><a href="#">Derde</a></li>
    <li><a href="#">Laatste</a></li>
</ul>
</li>
    <li><a href="#">LEVEN</a></li>
    <li><a href="#">MOBILITEIT</a></li>
    <li><a href="#">VRIJE TIJD</a></li>
</ul>
</div>

そして、ここに私のCSS（部分）があります：

#main_nav {
float:right;
height:40px;
margin-left:6px;
margin-top:90px;
position:absolute;
width:780px;
}

#main_nav_list li {
display:inline;
min-width:100px;
position:relative;
text-decoration:none;
}

 #main_nav_list li a {
color:#222;
font-family:Absolut_Pro, Helvetica, sans-serif;
font-size:1.1em;
margin-left:5px;
margin-right:10px;
text-decoration:none;
}

#main_nav_list li a:hover {
border-bottom:2px solid #db002a;
color:#db002a;
}

#main_nav_list ul {
background-color:#FFF;
margin-top:20px;
padding-top:20px;
position:absolute; 
width:180px;
}

#main_nav_list ul li { 
background-image:url('images/list_bg.png');
background-repeat:no-repeat;
background-position:4% 50%;
border-bottom:1px dotted #666;
float:left; 
font-size:0.7em;
padding-left:15px;
width:165px;
}

#main_nav_list ul a {
display:block;
font-family:Arial, Helvetica, sans-serif;
padding:5px 0;
}

#main_nav_list ul a:hover {
border:none;
text-decoration:none;
}

何か案は？

前もって感謝します

4

1 に答える 1

1

これらを追加します。

#main_nav_list ul {
margin:0;
bottom:0;
left:0
}
于 2012-05-02T12:10:49.173 に答える