Clicking on anchor links only works sometimes

Question

I have added drop down menus to my website, but am running into a problem where my links do not always work when clicked. Sometimes clicking a link just makes the drop down menu disappear, but if you keep trying eventually it will take you to where you are trying to go.

I originally suspected it had something to do with the transition duration, but playing around with the transitions/waiting for the transitions to complete before clicking does not appear to change anything.

Here is the html block for the drop down menu navbar

nav {
  position: sticky;
  top: -20px;
}

.dropdown {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.Python,
.cPP {
  position: relative;
  width: 500px;
  margin-top: 20px;
}

.Python ul,
.cPP ul {
  position: absolute;
  margin-top: 10px;
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  list-style: disc;
  border: 4px solid white;
  border-radius: 5px;
  background-color: rgb(86, 114, 117);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-15px);
  transition: all 0.4s ease;
}

.Python li,
.cPP li {
  background-color: rgb(216, 192, 147);
  width: 100%;
  height: 100%;
  border: 1px solid black;
  border-radius: 2px;
  align-items: center;
  line-height: 1.3rem;
}

.Python li:hover,
.cPP li:hover {
  background-color: rgb(207, 151, 46);
  transition-duration: 0.5s;
  pointer-events: all;
}

.Python a,
.cPP a {
  color: black;
  text-decoration: none;
  font-size: 0.5em;
}

.home a {
  font-size: 1.0em;
  align-items: center;
}

.home a:hover {
  color: rgb(24, 218, 208);
  transition-duration: 0.4s;
}

.dropdown button {
  background: rgb(51, 51, 51);
  color: rgb(255, 255, 255);
  width: 100%;
  font-size: 1.2em;
  cursor: pointer;
  padding: 5px;
  border-color: turquoise;
}

.dropdown button:hover {
  color: rgb(132, 255, 243);
  border-color: rgb(255, 145, 0);
  transition-duration: 0.4s;
}

.Python button:focus+ul,
.cPP button:focus+ul {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0px);
}

<nav>
  <div class="dropdown">
    <div class="home">
      <a href="../index.html">Home</a>
    </div>
    <div class="Python">
      <button>Python</button>
      <ul>
        <li><a href="../1DKinematics/1DKinematics.html">&nbsp;1-D Kinematics</a></li>
        <li><a href="./pendulumFriction.html">&nbsp;Damped Pendulum</a></li>
        <li><a href="./drivenPendulum.html">&nbsp;Driven Pendulum</a></li>
        <li><a href="./elasticPendulum.html">&nbsp;Elastic Pendulum</a></li>
        <li><a href="./doublePendulum.html">&nbsp;Double Pendulum</a></li>
        <li><a href="./elasticDoublePendulum.html">&nbsp;Elastic Double Pendulum</a></li>
        <li><a href="./RKvsEC.html">&nbsp;Runge-Kutta vs. Euler-Cromer </a></li>
        <li><a href="../oceanography/bobInWater.html">&nbsp;Dynamics of Body in the Ocean </a></li>
      </ul>
    </div>
    <div class="cPP">
      <button>C++</button>
    </div>
  </div>
</nav>

Answer 1

Here are two things you might want to do to fix the problem.

1. Style your a tag so it takes full width/height (easier to click)
2. Change pointer-events: all to pointer-events: auto, since all is only for SVG (See: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).

// For test only
document.querySelectorAll('.dropdown a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault()
    console.log('clicked')
  })
})

nav {
  position: sticky;
  top: -20px;
}

.dropdown {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.Python,
.cPP {
  position: relative;
  width: 500px;
  margin-top: 20px;
}

.Python ul,
.cPP ul {
  position: absolute;
  margin-top: 10px;
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  list-style: disc;
  border: 4px solid white;
  border-radius: 5px;
  background-color: rgb(86, 114, 117);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-15px);
  transition: all 0.4s ease;
}

.Python li,
.cPP li {
  background-color: rgb(216, 192, 147);
  width: 100%;
  height: 100%;
  border: 1px solid black;
  border-radius: 2px;
  align-items: center;
  line-height: 1.3rem;
}

.Python li:hover,
.cPP li:hover {
  background-color: rgb(207, 151, 46);
  transition-duration: 0.5s;
  pointer-events: all;
}

.Python a,
.cPP a {
  color: black;
  text-decoration: none;
  font-size: 0.5em;
}

.home a {
  font-size: 1.0em;
  align-items: center;
}

.home a:hover {
  color: rgb(24, 218, 208);
  transition-duration: 0.4s;
}

.dropdown button {
  background: rgb(51, 51, 51);
  color: rgb(255, 255, 255);
  width: 100%;
  font-size: 1.2em;
  cursor: pointer;
  padding: 5px;
  border-color: turquoise;
}

.dropdown button:hover {
  color: rgb(132, 255, 243);
  border-color: rgb(255, 145, 0);
  transition-duration: 0.4s;
}

.Python button:focus+ul,
.cPP button:focus+ul {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0px);
}

/* Code added */
.dropdown ul li a {
  display: block;
}

<nav>
  <div class="dropdown">
    <div class="home">
      <a href="../index.html">Home</a>
    </div>
    <div class="Python">
      <button>Python</button>
      <ul>
        <li><a href="../1DKinematics/1DKinematics.html">&nbsp;1-D Kinematics</a></li>
        <li><a href="./pendulumFriction.html">&nbsp;Damped Pendulum</a></li>
        <li><a href="./drivenPendulum.html">&nbsp;Driven Pendulum</a></li>
        <li><a href="./elasticPendulum.html">&nbsp;Elastic Pendulum</a></li>
        <li><a href="./doublePendulum.html">&nbsp;Double Pendulum</a></li>
        <li><a href="./elasticDoublePendulum.html">&nbsp;Elastic Double Pendulum</a></li>
        <li><a href="./RKvsEC.html">&nbsp;Runge-Kutta vs. Euler-Cromer </a></li>
        <li><a href="../oceanography/bobInWater.html">&nbsp;Dynamics of Body in the Ocean </a></li>
      </ul>
    </div>
    <div class="cPP">
      <button>C++</button>
    </div>
  </div>
</nav>

Answer 2

Thanks to Sean's suggestion, the fix was to ensure the anchor is not covered by the list, that way we click the links in the anchor instead of the list element. Here is the fix in CSS:

a{
z-index: 100;
}