Как создать меню в html CSS

Существует несколько способов создания меню на HTML и CSS, но наиболее популярными являются использование списков и навигационных ссылок.

Вот пример HTML кода для создания горизонтального меню на основе списка:

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Здесь создается навигационное меню внутри тега <nav>. Внутри меню создается список с помощью тега <ul>. Каждый пункт меню представлен элементом списка <li>, внутри которого размещается ссылка на страницу с помощью тега <a>. Для того, чтобы просто выделить активный пункт, можно навесить на него класс active.

А теперь CSS стили для этого меню:

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav li:last-child {
  margin-right: 0;
}

nav a {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #fff;
  background-color: #333;
}

Здесь задаются стили для элементов списка и ссылок. Список стиль «список без маркеров» (list-style: none), а также задается отступ между элементами списка с помощью свойства margin. Элементы списка размещаются друг за другом в строку благодаря свойству display: inline-block. Для ссылок задаются стили для отступов, цвет текста, шрифт и другие параметры. Кроме того, прописываются стили для наведения мыши на ссылки.

Результат будет выглядеть примерно так:

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