下拉菜單在Internet Explorer中不顯示7

我有拒絕在IE6的工作/ 7下拉菜單在Internet Explorer中不顯示7

應該是這樣的一個下拉菜單（在Firefox中打印）

的CSS

ul.menuSM li span { 
    width: 17px; 
    height: 35px; 
    float: left; 
     /*THIS IMAGE REPRESENTS THE RED ARROW NEXT TO THE LOGO*/ 
    background:url(../nImg/subnav_btn.gif) no-repeat center top; 
    margin-left: 2px; 
    text-indent:3000px; 
} 
ul.menuSM li span.subhover { 
    background-position: center bottom; 
    cursor: pointer; 
} 
/*THE DROP DOWN MENU*/ 
ul.menuSM li ul.submenuSM { 
    list-style: none; 
    position: absolute; 
     /*TRIED ALSO with: *position:fixed; to hack ie6/7 but neither..*/ 
    left: 0; 
    top: 32px; 
    background: #333; 
    margin: 0; 
    padding: 0; 
    display: none; 
    float: left; 
    width: 170px; 
    -moz-border-radius-bottomleft: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    border: 1px solid #111; 
    z-index: 1405; 
}

源碼HTML（請注意，這裏沒有<span>尚未

**<ul class="menuSM"> 
           <li> <a href="#"><img src="../../nImg/logoMeliaGold.png" alt="" /></a> 
            <ul class="submenuSM"> 
             <li><a href="http://es.solmelia.com/buscar/busqueda-avanzada.htm">Reservas</a></li> 
             <li><a href="http://es.solmelia.com/hoteles/ofertas.htm">Ofertas</a></li> 
             <li><a href="http://es.solmelia.com/hoteles">Destinos</a></li> 
             <li><a href="http://es.solmelia.com/hoteles/msm">Eventos y reuniones</a></li> 
             <li><a href="http://es.solmelia.com/nFamilias/jsp/C_Home.jsp">Familias</a></li> 
            </ul> 
           </li> 
          </ul>**

一些JS那追加，因爲我不能編輯HTML源:(

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("ul.submenuSM").parent().append("<span></span>"); 
    /* And this shows the dropdow but i tried also setting in the CSS display:block so i don't depend of javaScript and still can't see the dropdown */ 
    $("ul.menuSM li span").click(function() {  
     $(this).parent().find("ul.submenuSM").slideDown('fast').show(); 
     $(this).parent().hover(function() { 
     }, function(){ 
      $(this).parent().find("ul.submenuSM").slideUp('slow'); 
     }); 
     }).hover(function() { 
      $(this).addClass("subhover"); 
     }, function(){ 
      $(this).removeClass("subhover"); 
    }); 
}); 
</script>

最終的HTML

<ul class="menuSM"> 
          <li> <a href="#"><img src="../../nImg/logoMeliaGold.png" alt="" /></a><span></span> 
           <ul class="submenuSM"> 
            <li><a href="http://es.solmelia.com/buscar/busqueda-avanzada.htm">Reservas</a></li> 
            <li><a href="http://es.solmelia.com/hoteles/ofertas.htm">Ofertas</a></li> 
            <li><a href="http://es.solmelia.com/hoteles">Destinos</a></li> 
            <li><a href="http://es.solmelia.com/hoteles/msm">Eventos y reuniones</a></li> 
            <li><a href="http://es.solmelia.com/nFamilias/jsp/C_Home.jsp">Familias</a></li> 
           </ul> 
          </li> 
         </ul>

加載箭頭

任何想法，一些CSS我錯過了什麼？

PS：它工作在IE8

來源

2011-09-08 Toni Michel Caubet

你能以一種可以幫助別人的方式回答你自己的問題嗎？如果你這樣做，你可以選擇你的正確答案。這看起來很奇怪，但它是處理這種情況的首選方式。 – Will

解決了：

*+html div{ 
    z-index:1400; 
} 
*+html .conFranjaHomeGold{ 
    z-index:1 !important; 
}

這是另一個模塊的問題..

來源

2011-09-13 10:53:41

也許一個簡單的修補程序，但是，你有沒有聲明的DOCTYPE？

來源

2011-09-08 09:21:13

如果它在IE8中工作（如問題末尾所述），這個（一次！）不成問題。 – thirtydot

似乎有很多任意的和硬編碼的數字在你的代碼，或許你可以嘗試逆向工程我這個菜單都被審判和IE7 +和所有其他的瀏覽器測試：http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

它可以做在IE6工作與http://peterned.home.xs4all.nl/csshover.html

來源

2011-09-08 09:30:00 csswizardry

以及..因爲我在這個問題的要求，我不能編輯HTML ... –

我的意思是CSS ... – csswizardry

嗯，非常感謝，但它有一個Z索引問題：D finaly發現它：D –

下拉菜單在Internet Explorer中不顯示7

回答

相關問題