Как изменить меню CSS

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

Но вот простой пример, который демонстрирует, как изменить цвет фона, размер шрифта и цвет текста при наведении на пункты меню:

1. Создайте HTML-разметку для меню. В нем должен быть список ul, а каждый пункт меню должен быть элементом li, вложенным в ul. Для примера, возьмем меню с пятью пунктами:

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

2. Примените стили CSS для меню. Пример стилей, который изменяет цвет фона, размер шрифта и цвет текста при наведении на пункты меню:

.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

.menu li {
  float: left;
}

.menu li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #555;
  font-size: 20px;
  color: #fff;
}

3. Ваше меню теперь должно иметь цвет фона #333, белый текст, а при наведении на пункты меню появляется серый фон, увеличивается размер шрифта и меняется цвет текста на белый.

Надеюсь, эта информация поможет вам изменить ваше меню в CSS.