这篇文章是有关CSS功能的系列文章中的第二篇。

CSS正变得越来越强大，并且具有CSS网格和自定义属性（也称为CSS变量）之类的功能，我们看到了一些真正具有创造力的解决方案。 这些解决方案中的一些解决方案不仅着重于使网页更漂亮，而且使网页更易于访问，以及使样式可访问的体验更好。 我绝对是来这里的！

我们在网络上看到的常见UI模式是下拉菜单。 它们用于分段显示相关信息，而不会因按钮，文本和选项而使用户不知所措。 我们经常在网站的标题或导航区域内看到这些内容。

让我们看看是否可以仅使用CSS来制作这些菜单之一。 我们将在导航组件内创建链接列表，如下所示：

<nav role="navigation"><ul><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul>
</nav>

现在，假设我们要第二个导航项上的子菜单下拉菜单。 我们可以在那里做同样的事情，并在该列表项中包含一个链接列表：

<nav role="navigation"><ul><li><a href="#">One</a></li><li><a href="#">Two</a><ul class="dropdown"><li><a href="#">Sub-1</a></li><li><a href="#">Sub-2</a></li><li><a href="#">Sub-3</a></li></ul></li><li><a href="#">Three</a></li></ul>
</nav>

现在，我们有了两层导航系统。 为了在我们希望可见时隐藏和显示内容，我们需要应用一些CSS。 为了使交互更清晰，已从以下示例中删除了所有样式属性：

li {display: block;transition-duration: 0.5s;
}li:hover {cursor: pointer;
}ul li ul {visibility: hidden;opacity: 0;position: absolute;transition: all 0.5s ease;margin-top: 1rem;left: 0;display: none;
}ul li:hover > ul,
ul li ul:hover {visibility: visible;opacity: 1;display: block;
}ul li ul li {clear: both;width: 100%;
}

见笔简单CSS下拉菜单与哈弗由乌纳克拉维茨（ @una ）上CodePen 。

现在，子菜单下拉菜单已隐藏，但是当我们将其悬停在导航栏中的相关父菜单上时，该子菜单下拉菜单将显示并可见。 通过样式ul li ul ，我们可以访问该子菜单，通过样式ul li ul li ，我们可以访问其中的单个列表项。

问题

这开始看起来像我们想要的，但是到现在为止我们还远远没有完成。 Web的可访问性是产品开发的核心部分，现在将是实现这一目标的绝好机会。 添加role="navigation"是一个不错的开始，但是为了使导航栏可访问，应该能够在其中导航（并以合理的顺序关注适当的项目），并且还应具有正确的屏幕阅读器大声读出正在关注的内容。

您可以将鼠标悬停在任何列表项上，并清楚地看到正在悬停的内容，但是对于选项卡导航而言并非如此。 继续尝试尝试浏览上面的示例。 您失去联络，其中的重点是视觉正如你选项卡， 两人在主菜单中，你会看到一个焦点指示环，但是当你标签到下一个项目（其子菜单项中的一个），该对焦消失。

现在，需要注意的是，从理论上讲您将专注于另一项内容，并且屏幕阅读器可以解析Sub-One来解析该内容，但是键盘用户将无法看到正在发生的事情，并且会迷路。

发生这种情况的原因是，当我们对父元素的悬停进行样式化时，一旦将焦点从父项转移到该父项中的列表项之一，我们就会失去样式。 从CSS的角度来看这很有意义，但这不是我们想要的。

幸运的是，这里有一个新CSS伪类，它可以为我们提供我们在这种情况下想要的东西，它叫做:focus-within 。

解决方案：`：focus-within`

:focus-within伪选择器是CSS选择器4级规范的一部分，它告诉浏览器在其任何子级处于焦点时将样式应用于父级。 因此，在本例中，这意味着我们可以跳到Sub-One并应用:focus-within样式和父项的:hover样式，并确切地看到我们在导航下拉列表中的位置。 在我们的例子中是ul li:focus-within > ul ：

ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover {visibility: visible;opacity: 1;display: block;
}

见笔与悬停和简单CSS下拉菜单：焦点中的尤娜克拉维茨（ @una ）上CodePen 。

甜！ 有用！

现在，当我们选择第二个项目时，会弹出子菜单，当我们浏览子菜单时，可见性仍然存在！ 现在，我们可以在代码中附加:focus状态和:hover从而为键盘用户提供与鼠标用户相同的体验。

在大多数情况下，例如在直接链接上，我们通常可以这样写：

a:hover,
a:focus {...
}

但是在这种情况下，由于我们基于父级li来应用悬停样式，因此我们可以再次使用:focus-within切换时获得相同的外观。 这是因为我们实际上不能专注于li （除非我们添加tabindex="0" ）。 我们实际上是在关注其中的链接（ a ）。 :focus-within允许我们在关注链接时仍将样式应用于父级li （太酷了！）：

li:hover,
li:focus-within {...
}

此时，由于我们要应用焦点样式，因此我们可以做一些通常不推荐的操作 （删除该蓝色轮廓焦点环的样式）。 我们可以通过以下方式做到这一点：

li:focus-within a {outline: none;
}

上面的代码指定当我们通过链接（ a ）专注于列表项时，请勿对链接项（ a ）应用轮廓。 用这种方式编写代码是非常安全的，因为我们专门设计了悬停状态，并且使用不支持:focus-within浏览器，该链接仍会获得聚焦环。 现在，我们的菜单如下所示：

见笔简单CSS下拉菜单与悬停和：聚焦内聚焦状态由乌纳克拉维茨（ @una ）上CodePen 。

那ARIA呢？

如果您熟悉辅助功能，则可能听说过ARIA标签和状态。 您可以利用它们来发挥自己的优势，同时创建具有内置可访问性的这些类型的下拉菜单！ 您可以在这里找到Heydon Pickering的优秀示例。 当包含ARIA标记时，您的代码将看起来像这样：

<nav role="navigation"><ul><li><a href="#">One</a></li><li><a href="#" aria-haspopup="true">Two</a><ul class="dropdown" aria-label="submenu"><li><a href="#">Sub-1</a></li><li><a href="#">Sub-2</a></li><li><a href="#">Sub-3</a></li></ul></li><li><a href="#">Three</a></li></ul>
</nav>

您要将aria-haspopup="true"到下拉菜单的父级以指示其他状态，并在实际的下拉菜单本身中包含aria-label="submenu" （在这种情况下，我们的class="dropdown" 。

这些属性本身将为您提供显示下拉菜单所需的功能，但缺点是它们仅在启用JavaScript的情况下起作用。

浏览器支持警告

说到警告，让我们谈谈对浏览器的支持。 尽管:focus-within确实具有很好的浏览器支持，但需要注意的是，不支持Internet Explorer和Edge，因此在这些平台上的用户将无法看到导航。

这里的最终解决方案是同时使用ARIA标记和CSS :focus-within ，以确保您的用户了坚实的下拉经验。

见笔与悬停和简单CSS下拉菜单：焦点内和焦点状态和ARIA的乌纳克拉维茨（ @una ）上CodePen 。

如果您希望将来能够使用此功能，请在Edge User Voice上对其进行投票 ！ 并在您使用时提高:focus-ring ，以便我们能够为该对焦环设置样式并为所有人创建美好的交互式网络体验

更多关于`：focus-within`和A11Y

• Scott O'Hara 撰写了有关:focus-within ，突出显示了演示，例如突出显示的<table>行和下拉菜单
• 库沙格拉·古尔（Kushagra Gour） 着重介绍被困模式
• 埃里克·贝利（ Eric Bailey） 着重介绍了焦点样式
• 克里斯（Chris）在孩子专注时保持父元素可见
• 所有关于CSS-Tricks的文章都与:focus-within

翻译自: https://css-tricks.com/solved-with-css-dropdown-menus/