In this lesson, we are going to use the :focus-within pseudo class as a CSS only way improve the accessibility of a navigation menu.
If I were to use :focus on the `<li>`, it wouldn't work because the list items have a tabindex of -1.
:focus-within represents an element that has received focus or contains an element that has received focus. So when it's child, the anchor, receives focus, we can use the same thing that we do on the hover effect. Be wary of browser support though!
If you have to support IE and Edge check out other lessons: 'Expand a Menu on a Focus Event to Improve Accessibility' and 'Collapse a Submenu on the Blur Event to Improve accessibility'