Submenu being covered by Google Map div Options

[MongooseHugger]

I had this problem fixed earlier (by changing the z-index). However, something (I don't know what), has messed it up again. I have the z-indexes of all parts of the drop downs set to 1000 and the z-index of the map div set to 0, so it cannot be a z-index issue.

main.css

CODE

#logo
{

border: 1px dashed purple;
width: 1050;
height: 75;

}

#logo > img
{
width: 1050;
height: 75;

}


.floatleft
{
float: left;

}


.floatright
{
float: right;

}

#content
{

border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;


width: 960px;
  background-color: #ffffff;
  background-repeat: repeat-y;
  height: 800;



}


nav
{


      border: 10px solid transparent;
padding: 15px;
  border-image-source: url(./blue-diamond.gif);  
  border-image-repeat:repeat;
   border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 110%;

}

nav#vert
{

width: 220px;
  height: 540px;
  margin: 0px;
display:table-cell;
  float: left;


}



body {
  color: #000000;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #422520;
  background-image: url(./snow_mountain.jpg);
   background-repeat:no-repeat;

   background-size:cover;
  text-align: center;
  background-attachment: fixed;
  background-position: center;
}

#footerContainer
{

border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;
  width: 980px;
  background-color: #ffffff;
  background-repeat: repeat-y;

}

footer
{

    border: 10px solid transparent;
padding: 15px;


  text-align: left;
  margin: 0 auto;
  width: 1000px;

  background-repeat: repeat-y;

  border-image-source: url(./blue-diamond.gif);  
  border-image-repeat:repeat;
   border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;

}


footer > a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;

}

#container
{
  border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;
  width: 1050px;
  background-color: #ffffff;
  background-repeat: repeat-y;
  height: 750px;

}


nav > a
{

color: #ccccff;

}

nav#hor > div
{

border: 1px solid white;
float: left;
padding: 10px;
background-color: #000044;
}

nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
font-size: 110%;

}


nav#hor a
{

color: rgb(0 0,238);
}


nav#hor > div >  a
{

color:  #ccccff;
text-decoration: none;
font-size: 100%;
}



nav#hor>div:hover
{

background-color: #018802;

}

h1
{
font-family: "MV Boli", Times, Serif;

font-style: bold;
text-align: center;
font-size: 36px;

}

h2
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}

h3
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 20px;
}




#text-container
{





border: 2px solid cyan;



   width: 1005px;
  height: 690px;
  */ zoom: 1;
  */ margin: 0;
  display: table-cell;


padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    

}



#text-container:after
{
clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility:hidden;

}

#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}

.left img
{

float: left;
padding: 0 20px 20px 0;

}





.left > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}


.right img
{
float: right;
    margin: 0px 0px 15px 20px;
  border: 1px solid transparent;

}



.right > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}


nav#hor ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000044;
   z-index: 1000;
    
  


}

nav#hor ul li:hover
{
  background-color: #018802;

}



nav#vert ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000044;
    display: table-cell;
  
}
nav#hor ul li
{
float: left;
border: 1px solid white;
opacity: 0.8;
z-index: 1;

}

nav#vert ul li
{
float: left;
border: 1px solid white;.

}


nav#vert  li a, .dropbtn {
    display: inline-block;
  //  color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}


nav#hor  li a, .dropbtn {
    display: inline-block;
  //  color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}


nav#hor   li a:hover, .dropdown:hover .dropbtn {
  background-color: #018802;
}

nav#vert   li a:hover, .dropdown:hover .dropbtn {
  background-color: #018802;
}


li.dropdown {
    display: inline-block;
}

.dropdown-content ul li
{

width: 100%;
z-index: 1000;

}

.dropdown-content ul
{

z-index: 1000;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      color: rgb(0, 0, 238);
     z-index: 1000;
    
}

#eAndADropdown
{

}

#restaurantDropdown li
{
background-color: #000044;
border: 1px solid white;

}

#restaurantDropdown  ul
{
border: 1px solid white;

}



#restaurantDropdown:hover
{
  background-color: #018802;
}

#restaurantDropdown a
{
    color: rgb(0, 0, 238);

}

.dropdown-content a {
    color: rgb(0, 0, 238);
     border: 1 px solid white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

li  a
{

color: rgb(0, 0, 238);
}

The only part of main that should be needed is the dropdown things like .dropdown-content, nav#hor ul , nav#hor ul li, etc things.


topandside.php is a php file that is included. I don't believe it's where any errors are, but am including it in case anyone wants to run it.

CODE

<?php



echo "<div id='content'>";
echo "<div id='logo'>";
echo "<img src='./logo.png'></img>";
echo "</div>";
echo "<div id='container'>";
echo "<nav id='hor'>";
echo "<ul>";
echo "<li><a href='./index.php'> Home </a> </li>";
echo "<li><a href='./mountains.php'> The Mountains </a></li>";
echo "<li><a href='./resorts.php'> The Resorts </a></li>";
echo "<li><a href='./snowreports.php'> Snow Reports </a></li>";
echo "<li class='dropdown'><a href='java script:void(0)' class='dropbtn' onclick='showEAndADropdownHor()'> Events &amp Activities &darr;</a>";
echo "<div class='dropdown-content' id='eAndADropdown'>";
   echo "<ul>";
echo "<li><a href='./eventsandactivities.php'> Main </a></li>";
echo "<br/>";
echo "<li> <a href='./foggyGoggle.php'> Foggy Goggle </a></li>";
echo "<br/>";
echo "<li><a href='./lessons.php'>  Ski Lessons </a></li>";
echo "<br/>";
echo "</ul>";
echo "</div>";
?>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showEAndADropdownHor() {
    document.getElementById("eAndADropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

<?php

echo "</li>";
echo "<li><a href='./plantrip.php'> Plan A Trip </a></li>";
echo "<li><a href='./contactus.php'> Contact Us </a></li>";
echo "<li><a href='./findus.php'> Find Us </a></li>";
echo "<li class='dropdown'> <a href='java script:void(0)' class='dropbtn' onclick='showRestaurantDropdownHor()'> Restaurants &darr;</a>";
echo "<div class='dropdown-content' id='restaurantDropdown'>";
         echo "<ul>";
    echo "<li><a href='./grandviewbistro.php'>Grand View Bistro</a></li>";
    echo "<br/>";
      echo "<li><a href='./angelescrestcafe.php'>Angeles Crest Caf&eacute</a></li>";
     echo "<br/>";
     echo " <li><a href='./goldrushgrill.php'>Goldrush Grill</a></li>";
     echo "<br/>";
     echo "<li><a href='./bullwheelbarandgrill.php'>  Bullwheel Bar &amp  Grill </a></li>";
      echo "<br/>";
     echo "<li><a href='./bigpinesbarbecue.php'> Big Pines Barbecue </a></li>";
   echo "<br/>";
     echo "<li><a href='./northpolegrill.php'> North Pole Grill </a></li>";
echo "<li><a href='testingMongoose.php'> Change URL </a></li>";
     echo "</ul>";
    echo "</div>";
?>



<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showRestaurantDropdownHor() {
    document.getElementById("restaurantDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
<?php

echo"</li>";
echo "<li><a href='./about.php'> About </a> </li>";
echo "</ul>";
echo "</nav>";
echo "<div id='middle'>";
echo "<nav id='vert'>";
echo "<ul>";
echo "<li><a href='./index.php'> Home </a></li> <br/>";
echo "<li><a href='./mountains.php'> The Mountains </a></li><br/>";
echo "<li><a href='./resorts.php'> The Resorts </a></li><br/>";
echo"<li><a href='./snowreports.php'> Snow Reports </a></li><br/>";
echo "<li><a href='./eventsandactivities.php'> Events &amp Activities </a></li><br/>";
echo "<li><a href='./plantrip.php'> Plan A Trip </a></li><br/>";
echo "<li><a href='./contactus.php'> Contact Us </a></li><br/>";
echo "<li><a href='./findus.php'> Find Us</a></li><br/>";
echo "<li><a href='./restaurants.php'> Restaurants  &rarr; </a></li><br/>";
echo "<li><a href='./about.php'> About </a> </li><br/>";
echo "</ul>";
echo "</nav>";


?>

findus.php could be where the issue is. Lately, after finding that nothing showed up when the computer was offline, I added something in between the div tags to show that the map service wasn't available. (I hadn't had the drop down problem until I got to the net again. However, after undoing whatever I did, it still was having the problem.)

CODE

<html>
<head>
<title> Find Us</title>
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="icon" href="./ski_icon.png">
<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
    
    $("#container").css("height", 950);
    

  });

  </script>

</head>
<body>

<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 750px;
          z-index: 0;
        border: 1px solid black;
        
      
      }
    </style>



<?php include 'topandside.php';?>

<div id="text-container">

<h1> Find Us</h1>

    <div id="map">Map Service not available.</div>
    <script>

      function initMap() {
        var myLatLng = {lat: 34.297, lng: -117.729};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Diamond Peaks Resort!'
        });
      }
    </script>
     <script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap&key=AIzaSyBwOb-nArqJKJ1CEIpuSMPTdtUZheav6yg"></script>


  </div>
</div>
</div>

<?php include 'footer.php';?>
</div>

</body>
</html>

I have fiddled with all the z-indexes and it's not solving the problem. I'm baffled as to what happened.

[pandy]

Please post the rendered HTML or link to the page.

[MongooseHugger]

The page is not online, just local host, so I cannot link to it.

The rendering (I'm assuming you mean a screenshot), looks like this:

http://s566.photobucket.com/user/wenguin/m...issues.png.html

If by rendered, you mean the full HTML for the page, here it is:

CODE

<html>
<head>
<title> Find Us</title>
<link rel="stylesheet" type="text/css" href="./main.css">
<link rel="icon" href="./ski_icon.png">
<script src="jquery-3.0.0.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
    
    $("#container").css("height", 950);
    

  });

  </script>

</head>
<body>

<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 750px;
          z-index: 0;
        border: 1px solid black;
        
      
      }
    </style>



<div id='content'><div id='logo'><img src='./logo.png'></img></div><div id='container'><nav id='hor'><ul><li><a href='./index.php'> Home </a> </li><li><a href='./mountains.php'> The Mountains </a></li><li><a href='./resorts.php'> The Resorts </a></li><li><a href='./snowreports.php'> Snow Reports </a></li><li class='dropdown'><a href='java script:void(0)' class='dropbtn' onclick='showEAndADropdownHor()'> Events &amp Activities &darr;</a><div class='dropdown-content' id='eAndADropdown'><ul><li><a href='./eventsandactivities.php'> Main </a></li><br/><li> <a href='./foggyGoggle.php'> Foggy Goggle </a></li><br/><li><a href='./lessons.php'>  Ski Lessons </a></li><br/></ul></div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showEAndADropdownHor() {
    document.getElementById("eAndADropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

</li><li><a href='./plantrip.php'> Plan A Trip </a></li><li><a href='./contactus.php'> Contact Us </a></li><li><a href='./findus.php'> Find Us </a></li><li class='dropdown'> <a href='java script:void(0)' class='dropbtn' onclick='showRestaurantDropdownHor()'> Restaurants &darr;</a><div class='dropdown-content' id='restaurantDropdown'><ul><li><a href='./grandviewbistro.php'>Grand View Bistro</a></li><br/><li><a href='./angelescrestcafe.php'>Angeles Crest Caf&eacute</a></li><br/> <li><a href='./goldrushgrill.php'>Goldrush Grill</a></li><br/><li><a href='./bullwheelbarandgrill.php'>  Bullwheel Bar &amp  Grill </a></li><br/><li><a href='./bigpinesbarbecue.php'> Big Pines Barbecue </a></li><br/><li><a href='./northpolegrill.php'> North Pole Grill </a></li><li><a href='testingMongoose.php'> Change URL </a></li></ul></div>


<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showRestaurantDropdownHor() {
    document.getElementById("restaurantDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
</li><li><a href='./about.php'> About </a> </li></ul></nav><div id='middle'><nav id='vert'><ul><li><a href='./index.php'> Home </a></li> <br/><li><a href='./mountains.php'> The Mountains </a></li><br/><li><a href='./resorts.php'> The Resorts </a></li><br/><li><a href='./snowreports.php'> Snow Reports </a></li><br/><li><a href='./eventsandactivities.php'> Events &amp Activities </a></li><br/><li><a href='./plantrip.php'> Plan A Trip </a></li><br/><li><a href='./contactus.php'> Contact Us </a></li><br/><li><a href='./findus.php'> Find Us</a></li><br/><li><a href='./restaurants.php'> Restaurants  &rarr; </a></li><br/><li><a href='./about.php'> About </a> </li><br/></ul></nav>
<div id="text-container">

<h1> Find Us</h1>

    <div id="map">Map Service not available.</div>
    <script>

      function initMap() {
        var myLatLng = {lat: 34.297, lng: -117.729};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Diamond Peaks Resort!'
        });
      }
    </script>
     <script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap&key=AIzaSyBwOb-nArqJKJ1CEIpuSMPTdtUZheav6yg"></script>


  </div>
</div>
</div>

<div id='footercontainer'><footer>
<style>

a.twitter-share-button
{
color:  white;

}
</style>
<span style='float:left;'>Copyright  &copy;  2016   Dimaond Peaks Resort, &nbsp; All Rights Reserved.  </span><span style='float:right; border: 1px solid black;  color: black;'><a href='https://twitter.com/share' class='twitter-share-button' data-text='Come to Diamond Peaks Resort and enjoy the fun!' data-size='large'>Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </span><br/><a href='http://www.allwebpromotion.com/' target='_blank'>Website Design</a> by: All Web Promotion</footer></div></div>

</body>
</html>

BTW, I HAD it working in the past. It might be a CSS error or something where I put the wrong CSS in the wrong place by mistake.

This post has been edited by MongooseHugger: Aug 2 2016, 04:04 PM

[MongooseHugger]

I'm still utterly baffled as to what's wrong. I've tried and tried to change the z-index on the CSS, but it doesn't seem to be doing the trick. I'm still thinking the issue is with the CSS.

CODE

#logo
{

border: 1px dashed purple;
width: 1050;
height: 75;

}

#logo > img
{
width: 1050;
height: 75;

}


.floatleft
{
float: left;

}


.floatright
{
float: right;

}

#content
{

border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;


width: 960px;
  background-color: #ffffff;
  background-repeat: repeat-y;
  height: 800;



}


nav
{


      border: 10px solid transparent;
padding: 15px;
  border-image-source: url(./blue-diamond.gif);  
  border-image-repeat:repeat;
   border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 110%;

}

nav#vert
{

width: 220px;
  height: 540px;
  margin: 0px;
display:table-cell;
  float: left;


}



body {
  color: #000000;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  background-color: #422520;
  background-image: url(./snow_mountain.jpg);
   background-repeat:no-repeat;

   background-size:cover;
  text-align: center;
  background-attachment: fixed;
  background-position: center;
}

#footerContainer
{

border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;
  width: 980px;
  background-color: #ffffff;
  background-repeat: repeat-y;
height: 150px;
  

}

footer
{

    border: 10px solid transparent;
padding: 15px;


  text-align: left;
  margin: 0 auto;
  width: 1000px;

  background-repeat: repeat-y;

  border-image-source: url(./blue-diamond.gif);  
  border-image-repeat:repeat;
   border-image-slice: 30;

background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;


}


footer > a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;

}

#container
{
  border-left: 3px solid #283379;
  border-right: 3px solid #283379;
  text-align: left;
  margin: 0 auto;
  width: 1050px;
  background-color: #ffffff;
  background-repeat: repeat-y;
  height: 750px;

}


nav > a
{

color: #ccccff;

}

nav#hor > div
{

border: 1px solid white;
float: left;
padding: 10px;
background-color: #000044;
}

nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
font-size: 110%;

}


nav#hor a
{

color: rgb(0 0,238);
}


nav#hor > div >  a
{

color:  #ccccff;
text-decoration: none;
font-size: 100%;
}



nav#hor>div:hover
{

background-color: #018802;

}

h1
{
font-family: "MV Boli", Times, Serif;

font-style: bold;
text-align: center;
font-size: 36px;

}

h2
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}

h3
{

font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 20px;
}




#text-container
{





border: 2px solid cyan;



   width: 1005px;
  height: 690px;
  */ zoom: 1;
  */ margin: 0;
  display: table-cell;


padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    

}



#text-container:after
{
clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility:hidden;

}

#text-container  p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}

.left img
{

float: left;
padding: 0 20px 20px 0;

}





.left > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}


.right img
{
float: right;
    margin: 0px 0px 15px 20px;
  border: 1px solid transparent;

}



.right > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}


nav#hor ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000044;
   z-index: 1000;
    
  


}

nav#hor ul li:hover
{
  background-color: #018802;

}



nav#vert ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000044;
    display: table-cell;
  
}
nav#hor ul li
{
float: left;
border: 1px solid white;
opacity: 0.8;
z-index: 1;

}

nav#vert ul li
{
float: left;
border: 1px solid white;.

}


nav#vert  li a, .dropbtn {
    display: inline-block;
  //  color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}


nav#hor  li a, .dropbtn {
    display: inline-block;
  //  color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}


nav#hor   li a:hover, .dropdown:hover .dropbtn {
  background-color: #018802;
}

nav#vert   li a:hover, .dropdown:hover .dropbtn {
  background-color: #018802;
}


li.dropdown {
    display: inline-block;
}

.dropdown-content ul li
{

width: 100%;
z-index: 1000;

}

.dropdown-content ul
{

z-index: 1000;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      color: rgb(0, 0, 238);
     z-index: 1000;
    
}

#eAndADropdown
{

}

#restaurantDropdown li
{
background-color: #000044;
border: 1px solid white;

}

#restaurantDropdown  ul
{
border: 1px solid white;

}



#restaurantDropdown:hover
{
  background-color: #018802;
}

#restaurantDropdown a
{
    color: rgb(0, 0, 238);

}

.dropdown-content a {
    color: rgb(0, 0, 238);
     border: 1 px solid white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

li  a
{

color: rgb(0, 0, 238);
}

I have tried editing the PHP pages to see if that's it, but it's not. I have tried editing the CSS on the z-indexes but that isn't working either. I'm really baffled as to what's wrong.



I think this code SHOULD be doing the trick, but apparently it's not.

CODE

nav#hor ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000044;
   z-index: 1000;
    
  


}

-----Update--------

Found the problem, but I wish I could still do this and not have it overshadowed.

My issue was that I had the

CODE

nav#hor ul li
{
float: left;
border: 1px solid white;
opacity: 0.8;
z-index: 1;

}

with the opacity: 0.8 and that was what was messing it up.

However, how do I keep the opacity that way and NOT have it be covered up by the Goggle map?

This post has been edited by MongooseHugger: Aug 3 2016, 04:37 PM

[pandy]

After pasting everything together and plugging in a copy of jQuery the page still doesn't look like in the screencap. The dropdowns don't drop and the menu gets scrollbars. Something is missing. Can't you just upload the lot to a temp folder at your server?