https://i.stack.imgur.com/fMyZQ.jpg
Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg
You can clearly see the difference. I have also provided the code for your reference.
This is what I am currently 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'm facing some issue and I'm not sure where the problem lies. Your assistance would be greatly appreciated