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

Для создания меню CSS необходимо выполнить следующие шаги:

1. Создать HTML-разметку для меню. Обычно это список ul с вложенными элементами li.
2. Определить стили для элементов списка li. Это может быть цвет фона, цвет текста, размер шрифта, отступы и т.д.
3. Определить стили для ссылок a внутри элементов списка li. Это может быть цвет текста, размер шрифта, отступы и т.д.
4. Определить стили для состояний ссылок a, таких как hover и active. Например, при наведении курсора на ссылку можно изменить ее цвет или фон.
5. Определить стили для подменю, если они есть. Обычно это вложенный список ul с вложенными элементами li.
6. Определить стили для состояний подменю, таких как hover и active.

Пример кода для создания простого меню CSS:

HTML:

• Главная
• О нас
• Услуги
  • Маркетинг
• Контакты

CSS:

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

.menu li {
display: inline-block;
margin-right: 20px;
}

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

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

.menu ul {
display: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
background-color: #fff;
border: 1px solid #ccc;
}

.menu li:hover > ul {
display: block;
}

.menu ul li {
display: block;
margin: 0;
}

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

.menu ul li a:hover {
background-color: #f2f2f2;
}