why disabled links still clickable?

Question

I have tried multiple inputs to make disabled links not clickable, but I'm still not able to disable said link from being, well, unclickable. I was able to make the cursor not-allowed when it hovers over said disabled link, but it's obviously still clickable. I have followed a few links like this one and this sample, but nothing seems to work for me. I even checked under this site, but none of the samples I found helped. What am I doing wrong?

 /***** whole navigation bar *****/
nav#prime {
  display: grid;
  place-items: center;
  font-family: "Gill Sans", sans-serif;
  font-size: 14.75px;
}
nav#prime ul {  /*  whole <ul> tags under <nav> tag */
  grid-auto-flow: column;
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
nav#prime li {  /*selects whole <li> tags under <nav> tag */
  margin: 0;
  padding: 0;
  position: relative;  /*to provide boundry*/
}

/***** links *****/
ul#navbar a:link /* all normal, unvisited links under <ul> */ {
  display: block;
  text-decoration: none;
  background-color: #0E0E10; /* jet black */
  color: #FFFAFA; /* Olde lace white */
  margin: 0;
  padding: 5px 11px;
}
ul#navbar a:visited /* visited link */ {
  background-color: #F5F5F5; /* white smoke */
  color: #1A1110; /* licorice */
}
ul#navbar a:hover /* mouse over link, must come after <a:link> and <a:visited> */ {
  background-color: #242124; /* raiden */
  color: #FFFFF0; /* ivory */
}
ul#navbar a:active /* a link that's selected - must come after <a:hover> */ {
  background-color: #D3D3D3;
  color: #808080;
}

/***** for all <button> tags *****/
button.dropbtn {
  outline: none;
  border: none;
  font: inherit; /* Important for vertical-align on mobile phones */
  background-color: #0E0E10; /* jet black */
  color: #FFFAFA; /* Olde lace white */
  margin: 0; /* Important for vertical-align on mobile phones */
  padding: 5px 11px;
}

/***** submenu positioning *****/
#navbar ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: -99999em;
}

#navbar>li:hover>ul {
 
  position: absolute; /*to keep it under relative li*/
  top: 100%;
  width: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #000;
}

#navbar>li:hover>li li:hover>ul {
  left: 100%;
  margin-left: 1px;
}

/***** first tier *****/
#navbar {
  border: 1px solid;
  border-color: #0E0E10;
  border-radius: 4px;
  background-color: #0E0E10;
}
#navbar>li {
  float: left; /* brings sub elements under proper character */
}

<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>
                <li class="suboption"><a href="https://www.ikerjimenez.com/" target="_blank" title="REAL NAME: Iker Jiménez Elizari">Iker Jiménez</a></li>
                <li class="suboption"><a href="#" title="Gaurav Tiwari">Gaurav Tiwari <span class="cross">&#8225;</span></a></li>
                <li class="suboption"><a href="https://www.youtube.com/channel/UC5RfSq8MS00LWofLPSKAnDA" target="_blank" title="Alberto del Arco">Alberto del Arco</a></li>
                <li class="suboption"><a href="#" title="Alexsander Myagchenkov">Alexsander Myagchenkov</a></li>
                <li class="suboption"><a href="http://chernobrov.narod.ru/" target="_blank" title="Vadim Chernobrov">Vadim Chernobrov <span class="cross">&#8225;</span></li>
                <li class="suboption"><a href="#" title="Meghna Porwal">Meghna Porwal</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

You could use the pointer-events: none; property to achieve this. You can still use event listeners to trigger actions if you need to, but regular clicking will not work!

Since pointer-event: none;disables all mouse functions, wrap the disabled link with a div tag, and then add the cursor input.

MDN documentation for pointer-events property

/***** whole navigation bar *****/

nav#prime a {
  pointer-events: none;
}

nav#prime {
  display: grid;
  place-items: center;
  font-family: "Gill Sans", sans-serif;
  font-size: 14.75px;
}
nav#prime ul {  /*  whole <ul> tags under <nav> tag */
  grid-auto-flow: column;
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
nav#prime li {  /*selects whole <li> tags under <nav> tag */
  margin: 0;
  padding: 0;
  position: relative;  /*to provide boundry*/
}

/***** links *****/
ul#navbar a:link /* all normal, unvisitied links under <ul> */ {
  display: block;
  text-decoration: none;
  background-color: #0E0E10; /* jet black */
  color: #FFFAFA; /* olde lace white */
  margin: 0;
  padding: 5px 11px;
}
ul#navbar a:visited /* visited link */ {
  background-color: #F5F5F5; /* white smoke */
  color: #1A1110; /* licorice */
}
ul#navbar a:hover /* mouse over link, must come after <a:link> and <a:visited> */ {
  background-color: #242124; /* raiden */
  color: #FFFFF0; /* ivory */
}
ul#navbar a:active /* a link that's selected - must come after <a:hover> */ {
  background-color: #D3D3D3;
  color: #808080;
}

/***** for all <button> tags *****/
button.dropbtn {
  outline: none;
  border: none;
  font: inherit; /* Important for vertical align on mobile phones */
  background-color: #0E0E10; /* jet black */
  color: #FFFAFA; /* olde lace white */
  margin: 0; /* Important for vertical align on mobile phones */
  padding: 5px 11px;
}

/***** submenu positioning *****/
#navbar ul {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  left: -99999em;
}

#navbar>li:hover>ul {
 
  position: absolute; /*to keep it under relative li*/
  top: 100%;
  width: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #000;
}

#navbar>li:hover>li li:hover>ul {
  left: 100%;
  margin-left: 1px;
}

/***** first tier *****/
#navbar {
  border: 1px solid;
  border-color: #0E0E10;
  border-radius: 4px;
  background-color: #0E0E10;
}
#navbar>li {
  float: left; /* brings sub elements under proper character */
}

<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>
                <li class="suboption"><a href="https://www.ikerjimenez.com/" target="_blank" title="REAL NAME: Iker Jiménez Elizari">Iker Jiménez</a></li>
                <li class="suboption"><a href="#" title="Gaurav Tiwari">Gaurav Tiwari <span class="cross">&#8225;</span></a></li>
                <li class="suboption"><a href="https://www.youtube.com/channel/UC5RfSq8MS00LWofLPSKAnDA" target="_blank" title="Alberto del Arco">Alberto del Arco</a></li>
                <li class="suboption"><a href="#" title="Alexsander Myagchenkov">Alexsander Myagchenkov</a></li>
                <li class="suboption"><a href="http://chernobrov.narod.ru/" target="_blank" title="Vadim Chernobrov">Vadim Chernobrov <span class="cross">&#8225;</span></li>
                <li class="suboption"><a href="#" title="Meghna Porwal">Meghna Porwal</a></li>
            </ul>
        </li>
    </ul>
</nav>