Results 1 to 4 of 4

Thread: Dropdown menu appearing behind google map.

  1. #1
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Dropdown menu appearing behind google map.

    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/mengena...elanlokasi.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
    PHP Code:
    $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.

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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.
    Corrections to my coding/thoughts welcome.

  3. The Following User Says Thank You to bluewalrus For This Useful Post:

    sg552 (08-25-2010)

  4. #3
    Join Date
    Jul 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Code:
    z-index: 1000;
    in #nav ul in my external CSS fix the problem. Thanks too wildreason from codingforums.com
    http://www.codingforums.com/showpost...56&postcount=2

    thanks bluewalrus for your time

  5. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    He'll also need

    Code:
    parent of "nav" selector {
        position:relative
    }
    the parent element of the navigation

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •