Member Avatar for sg552
sg552 0 Newbie Poster

Hello everyone,

I have a problem with my page, my drop down menu is appearing behind google map. More info on my page is here: http://smkhutankampong.co.cc/mengenaikami/pelanlokasi.php

Please hover on the "MENGENAI KAMI" top navigation and you will see the dropdown menu is appearing behind the google map.

This is my top navigation html code - menu.inc.php

$topmenu = "<li><a href=\"/\">LAMAN UTAMA</a></li>
            <li><a href=\"tentangkami.php\">MENGENAI KAMI</a>
            <ul style=\"visibility: hidden; margin-top:45px; width:120px; left:174px;\">
            <li  style=\"float:none;\"><a href=\"/mengenaikami/piagam.php\"  style=\"float:none; width:145px;\">Piagam Sekolah</a></li>
            <li style=\"float:none; \"><a href=\"/mengenaikami/visi&misi.php\" style=\"float:none; width:145px;\">Visi & Misi</a></li>
            <li style=\"float:none; \"><a href=\"/mengenaikami/latarbelakang.php\" style=\"float:none; width:145px;\">Latar Belakang</a></li>		
			<li style=\"float:none; \"><a href=\"/mengenaikami/pelanlokasi.php\" style=\"float:none; width:145px;\">Pelan Lokasi</a></li>	
            <li  style=\"float:none;\"><a href=\"#\"  style=\"float:none; width:145px;\">Ajax Navigation</a></li>
            </ul>
            </li>			
            <li><a href=\"/galeri.php\">GALERI FOTO</a></li>
			<li><a href=\"/infopendidikan.php\">INFO PENDIDIKAN</a></li>
			<li><a href=\"/alumni.php\">ALUMNI</a></li>
            <li><a href=\"/hubungi.php\">HUBUNGI KAMI</a></li>";

My top navigation is using php include from menu.inc.php. The dropdown menu is using jQuery.

I'm open to all suggestion. Any help is appreciated. Thanks in advanced. :)

  • 1 Contributor
  • 0 Replies
  • 80 Views

Dani AI

Generated

This is almost always a z-index / stacking-context problem. The Google Map (or its container) is creating a stacking context or sitting above your menu, and the submenu either has no positioning or no z-index that can compete with the map. As noted, the menu is shown/hidden with jQuery but the stylesheet needs to place that submenu into a higher stacking level so it can render on top.

Common, safe fixes:

  • Give the submenu a positioned context and a large z-index (position:absolute or position:relative plus z-index).
  • Ensure the map container has a lower z-index (or none). Avoid changing Google Maps internals unless necessary.
  • Check ancestors for CSS that creates a stacking context (transform, opacity < 1, filter, or an explicit z-index). Those will block z-index from working as expected.

Example CSS to try (adjust selectors to match your markup):

/* put the dropdown above the map */
#topnav ul li ul {
  position: absolute;
  z-index: 10000;
}

/* make the map sit lower than the menu */
#map_canvas {
  position: relative;
  z-index: 0;
}

Troubleshooting tips: while the menu is visible, inspect it with DevTools and examine the computed z-index and the stacking context for both the menu and the map. If an ancestor has a CSS transform or a higher z-index, change or remove it. For background reading on z-index and stacking contexts see MDN: z-index and Understanding z-index.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.