下拉菜單在ie8中混亂

Question

這是我的下拉菜單的代碼。在所有瀏覽器中都可以，但ie8。我無法理解這個問題。我很樂意知道你的意見。

<ul id="nav" class="nav_wrapper"> 
    <li id="menu_3"> 
    <a href="#"> A </a> 
    <ul class="sub_menu" id="sub_3" style="display: none"> 
     <li id="menu_5"><a href="main.php?pages=5"> 1 </a></li> 
     <li id="menu_6"><a href="main.php?pages=6"> 2 </a></li> 
     <li id="menu_7"><a href="main.php?pages=7"> 3 </a></li> 
    </ul> 
    </li> 

    <li id="menu_18"><a href="main.php?pages=18"> B </a></li> 

    <li id="menu_19"> 
    <a href="#"> C </a> 
    <ul class="sub_menu" id="sub_19" style="display: none"> 
     <li id="menu_20"><a href="main.php?pages=20"> 1 </a></li> 
     <li id="menu_21"><a href="main.php?pages=21"> 2 </a></li> 
    </ul> 
    </li> 
</ul> 

這是樣式表。我已經刪除了一些不必要的樣式，比如背景和邊框，...

.nav_wrapper { 
left: 0px; 
margin-top: 7px; 
padding: 0px; 
position: fixed; 
right: 0px; 
Z-index:10;} 

#nav > li { 
display: inline; 
float: right; 
position: relative;} 

li { 
font-family: "tahoma"; 
font-size: 10pt; 
list-style: none outside none; 
} 

li a { 
float: right; 
padding: 18px 15px 20px; 
text-decoration: none; 
} 

.sub_menu { 
float: right; 
line-height: normal; 
margin-left: -60px; 
margin-top: 55px; 
padding: 0px; 
position: fixed; 
width: 202px; 
} 

.sub_menu li { 
display: inline-block; 
text-align: right; 
} 

.sub_menu li a { 
direction: rtl; 
display: inline-block; 
line-height: 1; 
padding: 10px 10px 10px 0px; 
width: 192px; 
} 

的問題是，在IE8的主菜單由右至左apears級聯。子菜單不在主菜單項下的正確位置。

Answer 1

http://jsfiddle.net/GMajE/

檢查了這一點。你需要做的是去除浮動：直接從下面的類：

#nav > li { 
display: inline; 
float: right; 
position: relative;} 

而你需要的.nav_wrapper類改成這樣：

.nav_wrapper { 
left: 0px; 
margin-top: 7px; 
padding: 0px; 
right: 0px; 
Z-index:10; 
float:right;} 

和關於子菜單。你應該在主導航裏放置position：relative並放置position：absolute，然後在子菜單中相應地放置left/right/top/bottom。我沒有在小提琴中設置子菜單，所以你知道。