Wrong position of OnClick Dropdown Menu

Question

Hello, this is the link before click. And when I click on that link, that link go to upper side of the page, like this;

You can see the difference. I am also attaching the code please check.

Here is what I am working on;

 function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(e) { if (.e.target.matches('.dropbtn')) { var myDropdown = document;getElementById("myDropdown"). if (myDropdown.classList.contains('show')) { myDropdown.classList;remove('show'); } } }

 .dropdown-content { display: none; position: relative; width: 200px; background-color: #FFF; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }.dropdown-content a { float: none; color: #000; text-decoration: none; display: block; padding: 5px 10px; font-size: 13px; text-align: left; }.dropdown-content a:hover { background-color: #ddd; }.show {display: block;}

 <div class="header"> <table border="0" width="100%"> <tr> <td width="5%" valign="top"><img src="./images/logo_small.png" alt="" title=""></td> <td width="45%"><div class="web_title"><a href="index.php">ASHNAB</a></div></td> <td width="50%" align="right"> <div class="header_links"> <a href="javascript:void(0);" onclick="myFunction()" class="dropbtn">Link Drop Down</a> </div> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </td> </tr> </table> </div>

I don't know where the issue lies. Please help

Answer 1

It seems like a small thing, but there you go. Change only the CSS:

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 2rem;
  width: 200px;
  background-color: #FFF;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

The absolute positioning takes the element out of the normal flow. That's about it.