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

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;
}
```

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

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

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

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

.active a  { color: red; }