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

Чтобы создать вертикальное меню на HTML-странице с помощью CSS, можно использовать различные методы. Вот один из способов.

Сначала создайте HTML-разметку для меню, используя элементы списка <ul> и <li>:

<div class="menu">
  <ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
    <li><a href="#">Пункт 4</a></li>
    <li><a href="#">Пункт 5</a></li>
  </ul>
</div>

Затем добавьте стили CSS, чтобы сделать список вертикальным меню:

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

.menu li {
  width: 100%;
}

.menu a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  font-size: 1.2rem;
  border-bottom: 1px solid #ccc;
}

.menu a:hover {
  background-color: #eee;
}

Здесь мы сначала задали стили для списка <ul>, которые удаляют стандартные стили списка, а также отступы и отступы заполнения.

Затем мы задали ширину 100% для каждого элемента списка <li>, чтобы они занимали всю ширину родительского элемента <ul>.

Мы также задали стили для ссылки <a>, чтобы они были блочными элементами и имели заполнение и цвет текста. Мы также добавили разделительную линию между пунктами меню с помощью свойства border-bottom.

Наконец, мы добавили стили для ссылок <a> при наведении, чтобы они имели другой фоновый цвет.

Вы можете настраивать стили в CSS по своему усмотрению, чтобы достичь необходимой вам эстетики вертикального меню.