Problem description

You are given a menu button component:

• The menu trigger is a <button class="menu-btn">.

• The menu dropdown is a <ul class="menu-list">, containing several <li><button class="menu-item">...</button></li> elements.

Write CSS to meet the following requirements:

• The menu button and menu items should all show a thick blue outline (3px solid #2684FF) with 2px offset, but only when focused using the keyboard (not mouse).

• Use :focus-visible for modern focus detection.

• The default browser outline should not appear for these elements.

• The menu should be visually clear and accessible, with menu items spaced and distinct.

Goal

Make the menu and all interactive items accessible to keyboard users, with visually robust and non-intrusive focus indicators.

Constraints

Do not use JavaScript or change HTML structure.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.