HTML 下拉菜单链接不起作用？

Question

我是一名网页设计初学者。我为我的网站创建了两个下拉菜单：projects 和 labs，虽然下拉菜单本身可以工作并且链接是可点击的，但它们不会将您定向到我提供的相关链接。它只是停留在同一页上。我完全不确定我的 HTML 在这方面有什么问题。我的页面如下：http://krystwal.infinityfreeapp.com/artdm171/index.html

<nav class="dropdown">
  <section class="projects">
    <button><h4>Projects</h4></button>
    <ul class="projectlist">

      <li><a href="projects/project2/index.html"><strong>2: Wireframes &amp; Style Tiles</strong> 10 April 2021</a></li>

      <li><a href="projects/project2/index.html"><strong>3: Multi-page Website</strong> 21 May 2021</a></li>
    </ul>
  </section>

  <section class="labs">
    <button><h4>Labs</h4></button>

    <ul class=lablist>
      <li><a href="../index.html.html"><strong>1: Domain Landing Page</strong> 08 March 2021</a></li>
      <li><a href="labs/lab2/index.html"><strong>2: Mt. Washington HTML</strong> 15 March 2021</a></li>
      <li><a href="labs/lab3/index.html"><strong>3: Mt. Washington CSS</strong> 12 April 2021</a></li>
      <li><a href="labs/lab4/index.html"><strong>4: Mt. Washington Table</strong> 17 April 2021</a></li>
      <li><a href="labs/lab5/index.html"><strong>5: Responsive Design</strong> 01 May 2021</a></li>
    </ul>
  </section>
</nav>

这是我的 CSS:

.projectlist {
    font-family: Montserrat;
    font-weight: 300;
    font-size: 10pt;
    text-transform: uppercase;
}

.lablist {
    font-family: Montserrat;
    font-weight: 300;
    font-size: 10pt;
    text-transform: uppercase
}

.dropdown {
    height: 10vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: auto;
}

.projects, .labs {
    position: relative;
}

.projects ul, .labs ul {
    position: absolute;
    background: rgba(252, 166, 126, 1);
    margin-top: 10px;
    width: 200px;
    height: 250px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    list-style: none;
    padding: 15px;
    border-radius: 20px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.5s ease;
}

.projects ul {
    height: 100px;
    width: 250px;
}

.projects a, .labs a {
    color: black;
    text-decoration: none;
}

.projects li, .labs li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projects a:hover, .labs a:hover {
    color:white;
}

.dropdown button {
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
}

.dropdown button:hover {
    color:orangered;
}

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

Answer 1

语义链接工作正常。该问题实际上是由链接列表默认状态下的 pointer-events: none 样式引起的。

单击后，按钮上的焦点就会丢失，这意味着以下规则中提供的覆盖值会丢失：

.projects button:focus + ul, .labs button:focus + ul {
    opacity: 1;
    pointer-events: all; // This is no longer the case when the focus is lost
    transform: translateY(0px);
}

因此，尽管菜单可见，但无法单击菜单项。

您可能想考虑更改在 none 和 block（或类似的东西）之间切换列表元素上的 display 属性的方法.

这样的方法会导致布局偏移，从而影响您的Cumulative Layout Shift score for Core Web Vitals。

或者，您可以通过使列表元素绝对定位在包含相对定位的父项内来实现类似的下拉效果。这将避免布局偏移，并允许您仍然对所有用户（包括可访问性用户）隐藏列表（通过显示属性），因为具有 none 显示的元素不可聚焦并被跳过辅助功能树）。

HTML 下拉菜单链接不起作用？

HTML drop down menu links are not working?

html

css

hyperlink