Google Maps and CSS/Javascript Drop Down Menus
Twice in one week I ran into the same problem. I put Google Maps on a webpage, only to find that the drop down navigation menu went behind the map. One navigation was nested “ul”s with CSS for formatting and a small piece of unobtrusive JavaScript to deal with IE’s problem on not recognizing :hover on non “a” tags (suckerfish), while the other had JavaScript sprinkled into the code and a fairly complex script that animated the dropdown menu (slide effect).
The solution, which worked on Internet Explorer and Firefox, was to apply a style of “z-index:9999” to the dropdown menus. I had apply that style to a number of divs in the javascript powered menu, as putting it on the top container, which was a table, didn’t seem to work. On the CSS menu, I used a selector to apply the z-index to all the uls in my nav, and it worked like a charm. Of course you don’t have to use a value of “9999”, just a number sufficiently high to prevent something else from appear above it.
September 5th, 2006 at 2:11 am
I’ve been having the same problem with a suckerfish menu which falls behind a scroller placed in a positioned div (scroller genie). I’ve tried what you suggested but still no luck in IE. What was your exact code for the suckerfish?
September 5th, 2006 at 11:31 pm
I used a high z-index for nested ul’s that were styled as horizontal navigation. So in your stylesheet, give the ul and li classes/ids a z-index of “999999″ or something else ridiculously high. Try adding the z-index it to the ul first, and if that doesn’t work, try adding it to the li’s. Also, you may want to look at the positioned div and apply a low z-index to the div.
October 9th, 2006 at 7:06 am
Hi Robert,
I also have come up against the z-ordering problem, now fixed (thanks). However in IE6 the menu doen’t dropdown as it should. I link to the suckerfish code in a .js file using:
if I add in the defer attribute the menu works but the map won’t display
Do you have an example (url) of a map and menu coexsisting happily that works in IE6?
October 11th, 2006 at 3:58 pm
Try this: http://www.proguiding.com/map
October 27th, 2006 at 6:37 pm
Tried the z-index method and it works in IE. But not in Mozilla.
After adding a select box and scroll mouse function (to zoom in/out) to the google map, it still works in IE. But in Mozilla menu items are shonw (they pop open) but any item that is shown over the google map is not selectable (trying to hoover over it with the mouse makes the open menu items disapear).
November 29th, 2006 at 5:33 pm
hmm… i got it to work in ie but not in firefox… any ideas?
thanks for your tip
November 29th, 2006 at 5:52 pm
Did you set the z-index of the map - looking at one of the pages on your site, it looks like the div with the map (#map) has inline style declaration which has no z-index,? In your stylesheet, I would try to put the z-index directly on a ul using an id and see if that works, rather than saying “div#menu_horiz ul”. Just play around with putting a z-index directly on the uls and lis with ids, and you should find a way to make it work.
November 29th, 2006 at 6:14 pm
Ralf,
I did a litte research, and found out that z-index is NOT inherited. I’m not a CSS guru, but I think you need to apply it directly to the uls. If your ul is buried in a bunch of divs, like they are with your nav:
<div id=”menu_horiz”>
<div id=”wrapper”>
<div id=”menuwrapper”>
<ul id=”primary-nav”>
Then the following CSS statement isn’t likely to work, because it is trying to apply a z-index on a ul directly beneath the div with id “menu_horiz”.
div#menu_horiz ul {
margin: 0;
padding: 0;
list-style: none;
border-bottom: 0px solid #C0C0C0;
border-left: 3px solid #B5AA94;
z-index:999; }
The other styles will probably work, because they are inherited by child elements, like the ul. So try either:
ul#primary_nav {z-index:999;}
or
ul#primary_nav ul {z-index:999;}
June 5th, 2007 at 10:42 pm
Thanks for the tip! This helped me troubleshoot the same problem.
September 10th, 2007 at 10:54 am
Just wanted to let you know this is still helping people. Thanks.
September 28th, 2007 at 2:46 pm
Thanks Robert! Worked like a charm!!!
January 29th, 2008 at 10:28 pm
Thank you Robert so very much! I put the z-index on all of the ul and li items and it finally worked in IE6 & IE7 (urghhhh-IE). I am creating a wordpress site for a client and your information was so incredibly valuable. : )
March 25th, 2008 at 4:44 am
Hello, I just want to thanks people who participate this forum’s topic discussion. I resolved my z-index issue on IE with what you said. Cool.
March 31st, 2008 at 6:13 pm
Thanks I just found your page after searching for a solution to this prob.
I had to add “z-index:9999″ to all the header navbar drop-down elements (li, ul, ul a, etc…) for it to work in IE6 and IE7.
Cheers!
July 9th, 2008 at 6:36 pm
I had a problem with the map laying ontop of a div. After inserting 20+ z-index’s using firebug I was able to find the right combination to get the map under my overlaid div.
August 29th, 2008 at 3:10 am
just used a z-index of 3 for ‘ul’ and 0 for ‘.map’ and it worked, too…
September 18th, 2008 at 6:44 pm
Thank you so much, you just helped me fix a problem that has been bugging me all week!
September 26th, 2008 at 1:03 pm
Woot. Worked great, saved me lots of trouble and time. Now if only it worked for Select elements.
October 15th, 2008 at 3:51 am
Thanks to all. The solutions above helped me to fix my problem with IE 7. Now if there was just a way to fix my 401k….
October 28th, 2008 at 2:54 am
Thanks for the tip.
Yes, apply the z-index to the ul’s on the style, problem solved