I have been experimenting with various methods to disable links, but I seem to be unable to prevent them from being clickable. While I was successful in changing the cursor to 'not-allowed' when hovering over the disabled link, it still remains clickable. I've referenced resources like this one and this sample, but none of the solutions seem to work for me. Even after checking multiple sources, I can't figure out what I'm doing wrong.
/***** entire navigation bar *****/
nav#prime {
display: grid;
place-items: center;
font-family: "Gill Sans", sans-serif;
font-size: 14.75px;
}
nav#prime ul {
grid-auto-flow: column;
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
nav#prime li {
margin: 0;
padding: 0;
position: relative;
}
/***** links *****/
ul#navbar a:link
Display:block;
Text-decoration:none;
Background-color:#0E0E10;
Color:#FFFAFA;
Margin:0;
Padding:5px 11px;
}
ul#navbar a:visited {
Background-color:#F5F5F5;
Color:#1A1110;
}
... (CSS code continues)
<nav id="prime">
<ul id="navbar">
<li class="dropdown">
<button type="button" onclick="myFunction()" class="dropbtn">The Desi Ghost Hunters
<i class="caret-down"></i>
</button>
<ul class="sub-menu">
<li class="suboption"><a href="#" title="Siddharth Bantval">Siddharth Bantval</a></li>
... (HTML code continues)