Подходит ли <details> для выпадающего меню на главной панели навигации?

Question

HTML5 вводит <details> элемент:

<details> представляет виджет раскрытия, из которого пользователь может получить дополнительную информацию или элементы управления

В настоящее время это экспериментальная технология, и она не поддерживается IE 11, но есть и запасные варианты JS. Оставляя в стороне все проблемы совместимости и сосредотачиваясь на его семантическом значении, можно использовать его для создания простого выпадающего меню без JavaScript в главной навигационной панели сайта, например:

<header>
  <img src="/logo.png" alt="…">
  <h1>My Site</h1>
  <nav>
<details>
  <summary>Catalogue</summary>
  <ul>
    <li><a href="…" title="…">books</a></li>
    <li><a href="…" title="…">moview</a></li>
    <li><a href="…" title="…">and so on</a></li>
  </ul>
</details>
<details>
  <summary>Settings</summary>
  <ul>
    <li><a href="…" title="…">profile</a></li>
    <li><a href="…" title="…">notifications</a></li>
    <li><a href="…" title="…">and so on</a></li>
  </ul>
</details>
  </nav>
</header>

Будет ли это правильное использование <details> элемент?

Позвольте мне подчеркнуть, что я не хотел бы обсуждать вопросы совместимости или экспериментального статуса элемента, но только в том случае, если использование будет правильным или правильным.