CSS友好的適配器菜單控件不工作在IE

Question

我的舊式菜單控件讓一些渲染問題讓Chrome看起來正確，所以我決定切換並使用CSS友好適配器（http：//cssfriendly.codeplex .com /）讓我的菜單控件呈現爲一個列表，並希望有更多的跨瀏覽器一致性，這也沒有奏效！

因此，我設計了我的菜單，現在他們可以在Chrome，Safari和Firefox中使用，但不能使用IE瀏覽器。我有一個從數據源加載的基本水平列表，在連接到它們的動態列表中有1-13個項目。現在，在Chrome和Firefox中，菜單設置完成後，動態菜單項正在靜態菜單項下正常顯示。但在IE（7/8）中，動態菜單項直接出現在當前懸停的靜態菜單項的右側（並且在當前靜態菜單項後面的第一個動態項目的右側）

這是菜單在Chrome中正常工作的截圖：在IE瀏覽器正在上空盤旋 http://i42.tinypic.com/2d3lom.png

而且同一個菜單的截圖（在這種情況下，8，但它看起來一樣7）： http://i39.tinypic.com/2vmc4kn.png

以下是該菜單呈現的HTML：

<div class="AspNet-Menu-Horizontal" id="ctl00_navMenu"> 
    <ul class="AspNet-Menu"> 
     <li class="AspNet-Menu-WithChildren AspNet-Menu-Selected"> 
      <a href="javascript:void(0);" class="AspNet-Menu-Link AspNet-Menu-Selected">Home</a> 
      <ul> 
       <li class="AspNet-Menu-Leaf AspNet-Menu-ParentSelected"> 
        <a href="default.aspx" class="AspNet-Menu-Link AspNet-Menu-ParentSelected">Home</a> 

       </li> 
      </ul> 
     </li> 
     <li class="AspNet-Menu-WithChildren"> 
      <a href="javascript:void(0);" class="AspNet-Menu-Link"> 
       Financial Systems</a> 
      <ul> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="fast/select_fast.aspx" class="AspNet-Menu-Link">Input Sales</a> 
            </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="fast/select_fast_upload.aspx" class="AspNet-Menu-Link">Upload Sales</a> 
            </li> 
      </ul> 
     </li> 
     <li class="AspNet-Menu-WithChildren"> 
      <a href="javascript:void(0);" class="AspNet-Menu-Link">Reports</a> 
      <ul> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="reports/select_fast_prior.aspx" class="AspNet-Menu-Link">Prior</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="reports/select_fast_summary.aspx" class="AspNet-Menu-Link">Summary</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="reports/select_fast_by_month.aspx" class="AspNet-Menu-Link">Monthly</a> 
       </li> 
      </ul> 
     </li> 
     <li class="AspNet-Menu-WithChildren"> 
      <a href="javascript:void(0);" class="AspNet-Menu-Link">Administration</a> 
      <ul> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="shoptracker/ShopTracker.aspx" class="AspNet-Menu-Link">Shop Tracker</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="shoptracker/shopupload.aspx" class="AspNet-Menu-Link">Shop Upload</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/fast_weekly_comp.aspx" class="AspNet-Menu-Link">Weekly Comp Metrics</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/fast_weekly_comp_upload.aspx" class="AspNet-Menu-Link">Weekly Comp Upload</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/fast_estimates.aspx" class="AspNet-Menu-Link">Estimate Maintenance</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/UserMaintenance.aspx" class="AspNet-Menu-Link">User Maintenance</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/CorpUserMaintenance.aspx" class="AspNet-Menu-Link">Corporate Users</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/CountryISOCodeMaintenance.aspx" class="AspNet-Menu-Link">Country ISO Code Maint</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/TerritoryMaintenance.aspx" class="AspNet-Menu-Link">Territory Rollup Maint</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/ContentAdmin.aspx" class="AspNet-Menu-Link">Content Maintenance</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/systemmessage.aspx" class="AspNet-Menu-Link">Edit System Message</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="admin/MenuBarAdminDetails.aspx" class="AspNet-Menu-Link">Menu Maintenance</a> 
       </li> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="/ChangePassword.aspx" class="AspNet-Menu-Link">Change Password</a> 
       </li> 
      </ul> 
     </li> 
     <li class="AspNet-Menu-WithChildren"> 
      <a href="javascript:void(0);" class="AspNet-Menu-Link">Help</a> 
      <ul> 
       <li class="AspNet-Menu-Leaf"> 
        <a href="help.aspx" class="AspNet-Menu-Link"> 
         Help Menu</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

這裏是我的CSS（同爲IE和Chrome，但在Chrome樣式表我只是添加下面這樣的梯度）：

.AspNet-Menu li {color:#000000;line-height:20px;border:none;font-size:11px;font-weight:bold;} 
.AspNet-Menu-WithChildren {width:150px;text-align:center;color:#FFFFFF;background:#940000;} 
.AspNet-Menu-Selected {color:#000000;} 
.AspNet-Menu-WithChildren a {color:#FFFFFF;} 
.AspNet-Menu-Selected a {color:#000000;background:#FFCB0B;} 
.AspNet-Menu-Leaf {background:#F0F0F0;width:150px;} 
.AspNet-Menu-Leaf a {color:#000000;} 
.AspNet-Menu-Leaf :hover, .AspNet-Menu-Leaf a :hover {background:#666666;color:#FFFFFF;} 

Answer 1

也許嘗試加入：

CSS

​​

我在想，這可能會迫使IE瀏覽器把它放在你需要它的地方。不是100％確定，並且無法在本地機器上嘗試。