单击锚链接有时仅有效

【问题标题】：Clicking on anchor links only works sometimes单击锚链接有时仅有效
【发布时间】：2021-12-28 14:33:45
【问题描述】：

我在我的网站上添加了下拉菜单，但我遇到了一个问题，即我的链接在点击时并不总是有效。有时单击链接只会使下拉菜单消失，但如果您最终继续尝试，它会将您带到您想去的地方。

我最初怀疑它与转换持续时间有关，但在点击之前玩转转换/等待转换完成似乎并没有改变任何东西。

这是下拉菜单导航栏的 html 块

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>

【问题讨论】：

• 列表项上的悬停状态使您看起来像是在单击链接，而实际上您只是在单击列表项。设置锚元素的样式以完全覆盖列表项。
• 你的意思是
• FooPage
？我发现这并没有解决问题。