28/28 Подробное решение с разъяснением

Курсы §13. Мастерская: создаём меню
1

Ребят, если кому нужно, ниже мое подробное решение с разъяснениями по каждому классу:

  1. Сначала добавляем класс для основного меню .main-menu, убираем стили списка, указываем в нем синий фон, выставляем ширину и зануляем отступы

.main-menu {
list-style: none;
background-color: #2980b9;
width: 200px;
margin: 0px;
padding: 0px;
}

  1. Добавляем класс main-menu > li для основного меню и задаем относительное позиционирование и сплошную рамку снизу цветом #2c3e50

.main-menu > li{
position: relative;
border-bottom: 2px solid #2c3e50;
}

  1. Добавляем класс .main-menu .sub-menu для подменю, убираем стили списка, задаем абсолютное позиционирование, координаты сверху и слева, z-index, ширину, и убираем отображение, чтобы работало только при наведении

.main-menu .sub-menu {
list-style: none;
position: absolute;
top: 0px;
left: 140px;
z-index: 10;
width: 200px;
display: none;
}

  1. Добавляем класс .main-menu > li:hover .sub-menu для подменю при наведении и указываем в нем отображение при наведении

.main-menu > li:hover .sub-menu {
display: block;
}

  1. Добавляем класс .main-menu a для пунктов основного меню, указываем блочный тип, цвет текста #ffffff, убираем подчеркивание текста, задаем отступы

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

  1. Добавляем класс .main-menu .opened .sub-menu. и указываем в нем display: block; для того, чтобы подменю было открыто по умолчанию

.main-menu .opened .sub-menu {
display: block;
}

  1. Добавляем класс .main-menu > .opened > a для самого пункта меню с открытым подменю (пункт Курсы), выставляем ему зеленый фон

.main-menu > .opened > a {
background-color: #1abc9c;
}

  1. Добавляем класс main-menu .sub-menu a для пунктов подменю и задаем цвет фона #1abc9c и рамку снизу цветом #2ecc71

.main-menu .sub-menu a {
border-bottom: 2px solid #2ecc71;
background-color: #1abc9c;
}