Log in

View Full Version : Dropdown menu appearing behind google map.



sg552
08-25-2010, 03:55 AM
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. :)

bluewalrus
08-25-2010, 04:11 AM
Give the menu a higher z-index than the map. You may have to put the z-index style inline on the g-map so it is specified as lower as well.

sg552
08-25-2010, 09:26 AM
z-index: 1000; in #nav ul in my external CSS fix the problem. Thanks too wildreason from codingforums.com
http://www.codingforums.com/showpost.php?p=986656&postcount=2

thanks bluewalrus for your time :)

boogyman
08-25-2010, 02:27 PM
He'll also need



parent of "nav" selector {
position:relative
}

the parent element of the navigation