Question

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

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