<p>I have a page using <code>&lt;ul&gt;</code> lists for navigation (Javascript changes the styling to display or not on mouseover).</p>

<p>This is working fine for me <em>except</em> in IE6 and IE7 when I have a Google Map on the page.</p>

<p>In this case the drop-down simply does not work. However, the page continues to work in FireFox 2.</p>

<p>I have done a little bit of research and discovered that this may be an example of the IE Select Box Bug, but I am not sure as the Google Map appears to be using a <code>&lt;div&gt;</code>, not an <code>&lt;iframe&gt;</code>.</p>

<p>Has anyone else encountered a problem similar to this, and if so do they have any recommendations on the best way to overcome this problem?</p>

[{'answer_id': 19190, 'author': 'Cebjyre', 'author_id': 1612, 'author_profile': 'https://Stackoverflow.com/users/1612', 'pm_score': 0, 'selected': False, 'text': '<p>I don\'t have an immediate answer for you, but the tools mentioned in <a href="https://stackoverflow.com/questions/17561/recommendations-for-browser-add-on-tools-to-help-with-development#17621">this answer</a> (particularly the IE DOM Inspector) may help.</p>\n'}, {'answer_id': 19199, 'author': 'Dan Herbert', 'author_id': 392, 'author_profile': 'https://Stackoverflow.com/users/392', 'pm_score': 3, 'selected': True, 'text': '<p>I don\'t know if this will fix your problem but you may want to try <a href="http://www.cssplay.co.uk/menus/pro_drop8.html" rel="nofollow noreferrer">this solution at ccsplay.co.uk</a> which fixes the problem of menus appearing underneath drop-down lists. I don\'t know if it will work for sure, but it\'s worth a shot.</p>\n'}, {'answer_id': 19279, 'author': 'travis', 'author_id': 1414, 'author_profile': 'https://Stackoverflow.com/users/1414', 'pm_score': 2, 'selected': False, 'text': '<p>I fixed a similar issue with drop-downs not appearing over flash movies in IE6/IE7/IE8 using this <a href="http://jquery.com/" rel="nofollow noreferrer">jQuery</a>:</p>\n\n<pre><code>$(function () {\n  $("#primary-nav").appendTo("#footer");\n});\n</code></pre>\n\n<p>Where <code>primary-nav</code> is the <code>ID</code> of the drop-down container element and <code>footer</code> is the <code>ID</code> of the last element on the page. I then used absolute positioning to relocate the dropdowns back to the top where they belong.</p>\n\n<p>The reason this works is because IE respects source ordering more than it does the <code>z-index</code>. It still wasn\'t able to display over top of a Windows Media Player plugin though.</p>\n'}, {'answer_id': 157303, 'author': 'Joum', 'author_id': 24098, 'author_profile': 'https://Stackoverflow.com/users/24098', 'pm_score': 2, 'selected': False, 'text': '<p>I believe that might happen because of an Active-X thingy IE 6+ uses to parse CSS.</p>\n\n<p>Over time I had to adapt my work to include some IE hacks on my CSS in order for it to be compatible with several browsers.</p>\n\n<p>I would first try to make a menu without Javascript, using pure CSS and including the hacks I mentioned. It would likely fix your problem. You don\'t actually need Javascript to change styles on mouseover and stuff like that.</p>\n\n<p>If you want to check out what CSS hacking is about: click <a href="http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/" rel="nofollow noreferrer">here</a></p>\n\n<p>If you want to check out some pure CSS menu examples: click <a href="http://www.dynamicdrive.com/" rel="nofollow noreferrer">here</a></p>\n\n<p>Hope this helps!</p>\n'}, {'answer_id': 159453, 'author': 'Adz', 'author_id': 24232, 'author_profile': 'https://Stackoverflow.com/users/24232', 'pm_score': 2, 'selected': False, 'text': '<p>According to <a href="http://groups.google.com/group/Google-Maps-Troubleshooting/browse_thread/thread/54403492b99849c8/10c2459fb9c1fc89" rel="nofollow noreferrer">this google maps thread</a>, you are correct - an IFrame is inserted by the google code.</p>\n\n<p>You\'ll need to use the solution which Dan mentioned, </p>\n\n<blockquote>\n  <p>you may want to try <a href="http://www.cssplay.co.uk/menus/pro_drop8.html" rel="nofollow noreferrer">this solution at ccsplay.co.uk</a> which fixes the problem of menus appearing underneath drop-down lists</p>\n</blockquote>\n\n<p>Alternatively, see <a href="http://www.javascriptjunkie.com/?p=5" rel="nofollow noreferrer">Internet Explorer HACK/Fix For Select Box Showing through DIV</a>.</p>\n\n<p>Basically the solution is, using JavaScript, to place your css menu in an IFrame in IE6.</p>\n\n<p>An alternative solution is to use JavaScript to hide the Google Map when the CSS menu is pulled down, or to replace the Google Map with a static map (maybe even a Google static map) when the CSS menu is pulled down.</p>\n'}]
['https://Stackoverflow.com/questions/19127', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/364/']