为什么getElementByID为null？

Question

我试图设计一个下拉菜单（但是，诚然，它们并没有按计划进行。）

我的主要问题是，尽管无法发现任何语法错误，但我似乎在getElementByID中得到的东西为null，因此除了body的内容之外没有任何东西真正出现。

是因为我有点懒，并且对两个下拉列表都使用相同的类名（ID不同，我检查以确保ID和getElementByID的拼写相同），所以我不应该搞乱相同的下拉菜单。

是的，在CSS中，我还没有完全设置eAndADropdown样式的元素，但这不应该导致此错误，是吗？

现在，一切都在消失。通常情况下，我认为这是一个语法错误，但是，如果它是一个，它完全没有我，因为我检查和检查。

我甚至检查了事件和活动中的&，在;代码后面&，在;代码后面都没有& ，只是为了看看是不是。似乎没有区别：

<?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='javascript: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

</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='javascript: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 "</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>";
?>

可能是什么问题？

我还发现以下代码可以正常工作：

<?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><a href='./eventsandactivities.php'> Events &amp Activities 

</a></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='javascript: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 "</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>";



?>

<?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><a href='./eventsandactivities.php'> Events &amp Activities </a></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='javascript: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 "</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>"; ?>

另外，关于它在我的CSS中的内容，我也会发布：

#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: 112%;

}

nav#vert
{

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

}

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: 112%;

}


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;

}

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

}

nav#vert ul
{
list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-color: #000044;

}
nav#hor li
{
float: left;
border: 1px solid white;.

}

nav#vert 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 {
    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);
}

#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);
}

Answer 1

1.Yoy有php错误。行</li>";应该与此echo "</li>";

类似

2.所有href='javascript:void(0)'替换为href =＆＃39;＃＆＃39;

3.添加css样式

  <style>
        .dropdown-content{
            display: none
        }
        .dropdown-content.show{
            display: block;
        }
    </style>

完整的html输出

＆＃13;

＆＃13;

<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='#' 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>
          <style>
            .dropdown-content {
              display: none
            }
            
            .dropdown-content.show {
              display: block;
            }

          </style>
        </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='#' 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>
            </ul>
          </div>
          <script>
            /* When the user clicks on the button,
            toggle between hiding and showing the dropdown content */
            function showRestaurantDropdownHor() {
              console.log('showRestaurantDropdownHor');
              console.log(document.getElementById("restaurantDropdown"));
              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>

＆＃13;

＆＃13;

＆＃13;

您的固定代码

<?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='#' 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>
<style>
    .dropdown-content{
        display: none
    }
    .dropdown-content.show{
        display: block;
    }
</style>
<?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='#' 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 "</ul>";
    echo "</div>";
?>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showRestaurantDropdownHor() {
    console.log('showRestaurantDropdownHor');
    console.log(document.getElementById("restaurantDropdown"));
    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>";
?>