Как сделать верхнее меню в css

Создание верхнего меню в CSS занимает несколько шагов:

1. Добавление HTML-кода для меню:

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

2. Оформление меню в CSS:

.menu {
  background-color: #333; /* Цвет фона меню */
  height: 50px; /* Высота меню */
  width: 100%; /* Ширина меню */
}

.menu ul {
  list-style-type: none; /* Убрать стандартные маркеры списка */
  margin: 0; /* Убрать отступы вокруг списка */
  padding: 0; /* Убрать отступы внутри списка */
}

.menu li {
  float: left; /* Размещаем пункты меню в строку */
}

.menu li a {
  display: block; /* Обеспечиваем полную ширину пункта меню */
  color: #fff; /* Цвет текста пункта меню */
  text-align: center; /* Выравниваем текст по центру */
  padding: 16px; /* Отступы вокруг текста пункта меню */
  text-decoration: none; /* Убираем подчеркивание у ссылок */
}

/* Стили для активного пункта меню */
.menu li a:hover {
  background-color: #555;
}

/* Стили для текущей страницы */
.menu .active {
  background-color: #4CAF50;
}

Это основной код, который позволяет создать стильное и функциональное верхнее меню на сайте. Кроме того, вам необходимо будет настроить поведение меню на мобильных устройствах при помощи медиа-запросов и добавления адаптивности.