Как настроить фокус только на меню, исключив его из других элементов?

1. Для настройки фокуса только на меню, можно использовать свойство tabindex с значением -1 для всех элементов, кроме меню. Например, следующий код исключит фокусировку на всех элементах страницы, кроме меню:

```html
<nav>
  <ul>
    <li><a href="#" tabindex="1">Home</a></li>
    <li><a href="#" tabindex="1">About</a></li>
    <li><a href="#" tabindex="1">Contact</a></li>
  </ul>
</nav>

<main>
  <h1>Main content</h1>
</main>
```

2. Чтобы сохранить подчеркивание ссылки на странице без использования кастомного стиля, можно использовать псевдокласс :focus. Например, следующий код подчеркнет ссылку при фокусировке на ней:

```css
a:focus {
  text-decoration: underline;
}
```

Это позволит сохранить подчеркивание ссылки при клике на неё или при других действиях на странице.

Нужно назначать кликнутой ссылке отдельный класс, который бы обозначал её активность. <br/> Это делает на основании адреса страницы либо бэкенд при генерации шаблона, либо JS, если это SPA. <br/> <br/> В представленной песочнице это может выглядеть примерно так: <br/> <pre><code class="css">.nav ul li a.active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .1em;
}</code></pre> <br/> <pre><code class="javascript">const $links = document.querySelectorAll('.nav a');

Array.from($links).forEach(($link) =&gt; {
  $link.addEventListener('click', (event) =&gt; {
    document.querySelector('.nav a.active')?.classList.remove('active');
    event.target.classList.add('active');
  })
});</code></pre>

Вы хотите выделить активный пункт меню (текущую страницу)? <br/> Это не делается фокусом. <br/> <br/> Добавляйте отдельный класс <br/> <br/> <pre><code>&lt;li class="active"&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;li&gt;
&lt;li&gt;&lt;a href=""&gt;&lt;/a&gt;&lt;li&gt;

.active a  { color: red; }</code></pre>