IE 7/8 CSS菜單問題

我有一個奇怪的問題，我的CSS下拉菜單。它出現了，但它隱藏在另一個元素的後面，並且列表項之間有一個增長的空間。IE 7/8 CSS菜單問題

CSS代碼是非常標準：

/*CSS Menu*/ 
#navigation li.menu ul 
{ 
    visibility: hidden; 
    position: absolute; 
    top: 40px; 
    right: 5px; 
    height: 15px; 
    padding-top: 10px; 
} 
#navigation li.menu:hover ul 
{ 
    visibility: visible; 
} 
#navigation li.menu ul li 
{ 
    border: 1px solid gray; 
    border-top: none; 
    border-bottom: 1px dotted #ccc; 
    z-index: 999999; 
    position: relative; 
} 
#navigation li.menu ul > li > a 
{ 
    padding: 2px 5px 2px 5px; 
    background-color: blue; 
    text-align: right; 
    display: block; 
    color: black; 
    background: white; 
} 
#navigation li.menu ul li a:hover 
{ 
    color: white; 
    background: #ccc; 
} 
#navigation li.menu ul li a:visited 
{ 
    color: black; 
}

由於是IE修復代碼：

#navigation li.menu ul li 
{ 
    border: 1px solid gray; 
    border-top: none; 
    border-bottom: 1px dotted #ccc; 
    z-index: 999999999; 
    position: relative; 
    background-position: 0 0; 
} 
#navigation li.menu ul > li > a 
{ 
    padding: 2px 5px 2px 5px; 
    background-color: blue; 
    text-align: right; 
    display: block; 
    color: black; 
    background: white; 
}

HTML代碼的菜單：

<code> 
    <div id="navigation" style="border: 0px solid #000; float: right;"> 
    <ul > 
     <li class="top"><a href="index.php"><span class="left"></span><span class="right">Home</span></a></li> 
     <li class="top"><a href="storage.php"><span class="left"></span><span class="right">Storage</span></a></li> 
     <li class="top"><a href="advertiser-info.php"><span class="left"></span><span class="right">Advertisers</span></a></li> 
     <li class="top"><a href="supplies.php"><span class="left"></span><span class="right">Supplies</span></a></li> 
     <li class="top"><a href="franchise-opportunities.php"><span class="left"></span><span class="right">Franchise Opportunities</span></a></li> 
     <li class="menu top"><a href="about-us.php"><span class="left"></span><span class="right">About Us</span></a>  
     <ul> 
      <li><a href="./contact-us.php">Contact Us</a></li> 
      <li><a href="./history.php">Company History</a></li> 
      <li><a href="./guarantee.php">Customer Guarantee</a></li> 
      <li><a href="./faq.php">FAQ</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</code>

來源

2009-10-14 Josh K

在IE8中，您提供的代碼示例按預期工作 - 彈出菜單顯示在靜態菜單的頂部。

在Firefox中，除了子彈不在白色背景之外，它是一個類似的故事，所以它們在靜態菜單文本的頂部顯得雜亂無章。

來源

2009-10-15 13:23:01 Fenton

這要看對方是什麼元素是圍繞此div塊的其餘DOM元素。

如果它是一個flash元素，那麼你可能需要使用Javascript來保持該flash元素隱藏CSS下拉菜單。

此外，請檢查其餘DOM元素的樣式，以確保其中沒有一個設置爲浮動。有時浮動對象也可能導致這種情況。

對不起，很難得到更具體的。我複製了你的代碼，並創建了一個快速的HTML頁面，只有該div塊和粘貼的CSS，並且在Firefox中查看它沒有空間，不斷增長或以其他方式，下拉菜單位於主菜單上方的某個圖層上。一切似乎都正常。

版Firefox：Mozilla的/ 5.0（窗口; U; Windows NT的6.0; EN-US; rv中：1.9.1.3）的Gecko/20090824火狐/ 3.5.3（.NET CLR 3.5.30729）

編輯：這是一個問題在IE7/8 只有？

來源

2009-10-15 06:19:26 Structure

IE 7/8 CSS菜單問題

回答

相關問題