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

Question

我是一名初学网页设计的学生。我为我的网站创建了两个下拉菜单：项目和实验室，虽然下拉菜单本身可以工作并且链接是可点击的，但它们不会将您定向到我提供的相关链接。它只是停留在同一页面上。我完全不确定我的 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。

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