Раскрывающееся меню "мигает" в IE6

Question

Я пытаюсь создать выпадающее меню на основе Stu Nicholls ': http://www.cssplay.co.uk/menus/pro_drop8.html

Мой должен пройти более Выбрать выпадающих и быть IE6 / 7-совместимым, поэтому я использую всю эту ерунду iFrame. Изменение z-index не исправит это, потому что IE установил бесконечное значение zindex, чтобы выбрать выпадающие списки.

Так что моя проблема в том, что если я скопирую и вставлю (буквально, без изменений) выпадающее меню с веб-сайта в мое приложение, оно будет работать нормально во всем, кроме IE6, где оно будет «мигать». Это означает, что каждый раз, когда вы наводите курсор мыши на другой пункт меню, он на мгновение исчезает, а затем появляется снова. Я думаю, это потому, что IE6 считает, что вы больше не зависаете в меню, когда вы на самом деле.

Я все перепробовал и часами гулял в гугле, не обнаружив, что выпадающее меню работает. Знаете ли вы, что может вызвать эту проблему (и, возможно, как ее исправить)?

Спасибо -

Answer 1

Я не хочу быть "тем парнем", который предлагает вам использовать что-то еще, так что не пытайтесь сделать это, если вы настроены на использование кода Николса. Но если вы не проданы в выпадающих меню Stu Nicholls, вы можете проверить меню YUI . Я специально упоминаю о них, потому что я добился большого успеха с их поддержкой iframe-to-fix-ie6-bugs. (По крайней мере, вы можете использовать их пример кода, чтобы увидеть, хорошо ли работает IE6 с выпадающими меню других или это просто что-то с Николсом.)

Answer 2

Иногда в IE возникает проблема со свойством haslayout . Быстро легко исправить это установить:

height: 1%;

Answer 3

IE использует триггер события, отличный от остальных браузеров. Попробуйте сделать это для мыши:

        //browser sniff
        if (navigator.appName == "Microsoft Internet Explorer") {
            document.getElementById('yourtriggerid').onmouseleave = function() {
                document.getElementById('themenuid').style.display = "none";
            };
        } else {
            document.getElementById('yourtriggerid').onmouseout = function() {
                document.getElementById('themenuid').style.display = "none";
            };
        }

'yourtriggerid' - это то, что вы хотите, чтобы вызвать событие, а затем 'themenuid' - это меню / элемент с абсолютным позиционированием, который вы хотите скрыть и показать.

Ключ onmouseleave для запуска события для IE. Надеюсь, это кому-нибудь поможет!

Answer 4

Хорошо, я нашел, как исправить мою проблему. Я использую выпадающее меню Chrome: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

Код простой, красивый и отлично работает. У меня были некоторые трудности с настройкой, но теперь это сделано, и моя жизнь намного лучше:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>


<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

Answer 5

Я не знаю, действительно ли это необходимо, но плагин jQuery bgiframe решает проблему выбора довольно чисто, поэтому вам не нужно делать все вручную.

Надеюсь, это поможет.