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

Чтобы создать вертикальное меню в HTML/CSS, нужно использовать несколько элементов HTML и применить к ним стили CSS. Вот базовый пример вертикального меню:

HTML:

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

CSS:

.menu {
  width: 200px;
  background-color: #f2f2f2;
}

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

.menu li {
  border-bottom: 1px solid #ccc;
}

.menu li:last-child {
  border: none;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

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

Здесь мы создали div с классом «menu» и ul с несколькими пунктами меню «li», каждый из которых содержит ссылку «a». В CSS мы сначала установили ширину и цвет фона для div «menu», а затем определили стили для ul, li и a.

Мы использовали свойство list-style для удаления маркера списка, свойство margin и padding для установки отступов, свойство border для добавления разделительной линии между пунктами меню и свойство last-child для удаления линии для последнего элемента.

Стили для ссылки «a» включают свойство display: block, чтобы ссылки занимали всю ширину родительского «li» блока, а также свойство padding для добавления отступов вокруг ссылки.

В блоке, указанном после псевдокласса :hover, мы изменили цвет фона и цвет текста для эффекта наведения на ссылку.

Таким образом, мы можем легко создать вертикальное меню в HTML/CSS с помощью нескольких элементов и стилей.