Dropdown menu "blinking" in IE6

Question

Hi,

I am trying to create a dropdown menu based on Stu Nicholls' : http://www.cssplay.co.uk/menus/pro_drop8.html

Mine needs to go over Select dropdowns and be IE6/7 compliant, so that's why I'm using all this iFrame nonsense. Changing z-index will not fix it because IE set an infinite zindex value to select dropdowns.

So my problem is that if I copy and paste (litterally, no changes made) the dropdown menu from the website to my application it will work fine in everything except IE6 where it will "blink". Meaning that everytime you hover over a different menu entry it will disapear for a small instant and then appear again. I think it's because IE6 consider that you're not hovering the menu anymore when you actually are.

I tried everything and browsed google for hours without finding a dropdown menu working. Do you know what could cause this problem (and maybe how to fix it) ?

Thanks -

Answer 1

Sometimes IE will have an issue with it's haslayout property. A quick easy fix is to set:

height: 1%;

Answer 2

I hate to be "that guy" who suggests you use something else, so don't try this if you're set on using Nicholls' code. But if you're not sold on Stu Nicholls' dropdown menus, you could check out YUI's menus. I specifically mention those because I've had great success with their iframe-to-fix-ie6-bugs support. (At the very least, you could use their sample code to see if IE6 behaves nicely with others' dropdown menus or if it's just something with Nicholls'.)

Answer 3

I don't know if this is necessarilly what you need but the jQuery bgiframe plugin handles the select problem pretty cleanly so you don't have to do everything manually.

Hope that helps.

Answer 4

Ok I found how to fix my issue. I'm using Chrome Drop Down Menu : http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

The code is simple, pretty and works perfectly. I had some hard time customizing it but now it's done and my life is much better :

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com"&gt;Home&lt;/a&gt;&lt;/li&gt;
<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/"&gt;Dynamic Drive</a>
<a href="http://www.cssdrive.com"&gt;CSS Drive</a>
<a href="http://www.javascriptkit.com"&gt;JavaScript Kit</a>
</div>


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

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

Answer 5

this is a bit late, but it's still up there in google for searching "blinking dropdown ie", so hopefully this will help someone:

ie uses a different event trigger than the rest of the browsers, try doing this for the mouse out:

        //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' is whatever you want to trigger the event, and then 'themenuid' is the menu/absolute positioned div you want to hide and show.

key is 'onmouseleave' to trigger the event for ie. Hope this helps someone!