html - 我的 标签不起作用？

Question

这是我的第一个 HTML 网站，我遇到了一些小问题。在“关于我”部分，有三个超链接不起作用(我无法点击它们)。但是，下拉菜单中的那些有效。知道为什么吗？

这是我的代码 https://jsfiddle.net/2hkhmLef/

<p>
                  I am a 20 year old student studying at Concordia University in Montreal. Currently, I am in my
                  2nd year of education pursuing a Bachelors in Software Engineering. Up to now, my experience
                  has been wonderful. I meet great people that share similar interests, my network is growing day-by-day
                  and I learn things that interest me. The ultimate goal right now is to graduate and this website will
                  be used to explore everything I learn as I go. For my school assignments and personal projects, you can find
                  them in the <a href="#port_section" class = "intro_link">portfolio</a> section. For my personal weekly activities, you can find out what I've been
                  up to in the <a href="#" class = "intro_link">activities</a> section. Finally, if you are ever interested in checking out my other social
                  networks (GitHub, LinkedIn, etc...) or to contact me, you can go to the <a href="#" class = "intro_link">contacts</a> section.
</p>

Answer 1

您的 .menu 有 height: 100vh 并且在 nav 内，position: fixed，所以它总是占据 100% 的视口(viewport)，所以当您单击时，您总是在单击 .menu。

如果您将 css 更改为:

https://jsfiddle.net/2hkhmLef/1/

.menu {
  width: 100%;
  height: 92px;
  margin-bottom: 100vh;
}

它仍然会向下推送内容，然后不会阻止链接。

我在你的 html 中看不到图片，所以我无能为力，但是，这是 super hacky 我不推荐它，但如果你只是需要可点击的链接:

.menu {
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

.menu ul {
    pointer-events: all;
}

也会解决这个问题。