Dropdown Menu not displayed in internet explorer 7

I have a dropdown menu that refuses to work in IE6/7

Should look like this (print in Firefox)

The 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-bot开发者_开发技巧tomleft: 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;
}

The source HTML (please note that there's no <span> here yet

**<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>**

Some JS That appends the because i can't edit the HTML source :(

<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>

The Final 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>

Some CSS that loads the arrow

Any idea what i'm missing?

PS: it works in IE8

Maybe a simple fix but, have you declared the DOCTYPE?

There seem to be a lot of arbitrary and hard-coded numbers in your code, perhaps you could try to reverse engineer this menu of mine that is tried and tested in IE7+ and all other browsers: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

It can be made to work in IE6 with http://peterned.home.xs4all.nl/csshover.html

H

Solved with:

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

It was another module's problem..