CSS下拉菜單功能錯誤在IE7,8和9

我有一個CSS下拉菜單，完美地在Mozilla/Chrome/Safari中。然而，如果IE10（但有效）但在IE9中根本不起作用，則有點不便。CSS下拉菜單功能錯誤在IE7,8和9

我試圖找出是什麼導致這種情況，因爲有網站使用CSS下拉菜單，在IE中完美的功能。

請在這裏看到小提琴：http://jsfiddle.net/xZuDC/

的圖片如下：在IE

鉻

Menu In Chrome

菜單

常規菜單

列表：

<ul class="ulrRight"> 
    <li><a onclick="your_name">Your Account</a> 
     <ul id="your_name"> 
      <li><a href="/index.php?f=mydetails">Details</a></li> 
      <li><a href="/index.php?f=mypassword">Password</a></li> 
     </ul> 
    </li> 
</ul>

來源

2013-10-03 J Spring

你提琴只顯示默認的'ul'，你可能已經忘記了一些東西。 –

'<！DOCTYPE html>'請聲明一個文檔類型 – user2092317

小提琴中有一個語法。 ** [這裏]（http://jsfiddle.net/xZuDC/4/）**是最新的。由於文本是白色的，我還將黑色背景添加到菜單容器中。 – matewka

我做了一些改變，據我可以告訴它在IE9工作。

這是我發現導致小提琴到不行，<ul class="ulrRight"> <的唯一的事---有UL

的jsfiddle後，一個額外的[R似乎並不在IE 8和下工作，至少在控制檯的瀏覽器視圖。

這裏是更新擺弄我做

fiddle

我建議只寫這篇文章乾淨了一點，像這樣：

<div class="dropDown"> 
    <ul> 
     <li>Your Account 
      <ul> 
      <li>Details</li> 
       <li>Password</li> 
      </ul> 
     </li> 
     <li>Help 
      <ul> 
       <li>Support</li> 
       <li>Contact Us</li> 
       <li>Client FAQ's</li> 
       <li>Haulier FAQ's</li> 
      </ul>    
     </li> 
     <li>Logout</li> 
    </ul> 
</div>

CSS

.dropDown { 
    width: 500px; 
    height: 60px; 
    margin: 0 auto; 
    background: mediumSeaGreen; 
} 

.dropDown > ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

.dropDown > ul > li { 
    float: left; 
    width: 33.3333%; 
    line-height: 60px; 
    text-align: center; 
} 

.dropDown > ul > li:hover { 
    background: #1b1b1b; 
    color: #fff; 
} 

.dropDown > ul > li:hover > ul { 
    display: block; 
} 

.dropDown > ul > li > ul { 
    display: none; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}

fiddle for code

來源

2013-10-03 18:18:42

不幸的是，它不起作用在IE 9上，當我把它放在網站上使用，儘管它通過jsFiddle工作。它幾乎看起來像我在我的第一篇文章中附加的照片，但不填充:( –

CSS下拉菜單功能錯誤在IE7,8和9

回答

相關問題