Clicking on anchor links only works sometimes

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>

Solution

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

Style your a tag so it takes full width/height (easier to click)
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>