У меня есть выпадающее меню, которое отказывается работать в IE6 / 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>
<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
Кажется, что в вашем коде много произвольных и жестко запрограммированных чисел, возможно, вы можете попытаться перепроектировать это мое меню, которое опробовано и протестировано в IE7 + и во всех других браузерах: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Может быть сделано для работы в IE6 с http://peterned.home.xs4all.nl/csshover.html
H
Решено с помощью:
*+html div{ z-index:1400; } *+html .conFranjaHomeGold{ z-index:1 !important; }
Это была проблема другого модуля ..
Может быть, простое исправление, но вы объявили DOCTYPE?