Drop down menu via img

Question

I'm creating a personalized website for me and my friend, and at the top in the center I have a few social media links. I need to put two links for each social media picture since me AND my friend are both on the site. I'm trying use an event listener to have the onclick function deliver a drop down menu containing links to both sites. It's not working. Here's the appropriate code.

Html:

<div id="social-media-links">      
  <div class="drop-container">
    <div class="drop-button"><img onclick="myFunction()" id="facebook"src="images/facebook">
      <div class="drop-menu">
       <a href="https://www.facebook.com/30luv_-110625097180857/">30luv_</a>
       <a href="https://www.facebook.com/pgiovanni1234/">Paul Giovanni</a>
      </div>
    </div>
 </div>
 <div class="drop-button"><img id="instagram" src="images/instagram"></div>
 <div class="drop-button"><img id="youtube" src="images/youtube"></div>
</div>

CSS:

    .drop-container {

  position: relative;
  display: inline-block;

}

.drop-button:hover, .dropbtn:focus {

  background-color: aquamarine;

}

.drop-button {

  border: none;
  cursor: pointer;
  display: inline;

}

.drop-menu {

  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.drop-menu a {

  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

}

.show {display:block;}

Javascript

function myFunction() {
    document.getElementsByClassName("drop-menu").classList.toggle("show");
  }
  
  // Close the dropdown menu if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.drop-button')) {
      var dropdowns = document.getElementsByClassName("drop-menu");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }

here's an image of the page:

Center top social media links

Answer 1

i decided to take out the js and just do plain css....

HTML:

 <div id="dropf" class="drop">
 <img id="facebook" src="images/facebook">
    <a class="links" href="https://www.facebook.com/30luv_-110625097180857/">30luv_</a>
    <a class="links" href="https://www.facebook.com/pgiovanni1234/">Paul G</a></button>
  </div>
  <div id="dropi" class="drop">
    <img id="instagram" src="images/instagram">
    <a class="links" href="https://www.instagram.com/30luv_/">30luv_</a>
    <a class="links" href="https://www.instagram.com/paulgiovanniguitar">Paul G</a>
  </div>
  <div id="dropy" class="drop">
    <img id="youtube" src="images/youtube">
    <a class="links" href="https://www.youtube.com/channel/UCQHhVyq8BGRc1-IAEKFQGXw">30luv_</a>
    <a class="links" href="https://www.youtube.com/channel/UCGtfQ6n5mCQrnNHtN-U8zbA">Paul G</a>
  </div>

CSS:

.drop:hover > .links {

    display: block;

}

this makes it so when you hover over it the links appear... w/o the javascript. Sorry to just change it up.