OnClick下拉菜单的位置错误

Question

您好，这是点击之前的链接。当我单击该链接时，该链接将转到页面的上方，如下所示；

您可以看到不同之处。我还附有代码，请检查。

这是我正在研究的内容；

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>

我不知道问题出在哪里。 请帮忙

Answer 1

这似乎是一件小事，但是您去了。仅更改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;
}

绝对定位使元素脱离正常流动。就是这样。