OnClick 下拉菜單的 position 錯誤

Question

您好，這是點擊前的鏈接。 當我點擊那個鏈接時，那個鏈接 go 到頁面的上方，就像這樣；

你可以看到區別。 我也附上代碼，請檢查。

這是我正在做的事情；

 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

這似乎是一件小事，但你有 go。 僅更改 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;
}

絕對定位使元素脫離正常流程。 就是這樣。