Помогите разобраться. Курс «Мастерская: создаём меню». Задание "Выпадающее меню"

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

Визуально все похоже. А на деле нет:( Не могу допилить.

html, body{
    margin:0;
    padding:0;
    
}
body{
   
    min-height:280px;
    padding:0px;
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height:1.4;
    background:#ecf0f1;
}
.main-menu{
    list-style:none;
    width:200px;
    position:relative;
    left:-30px;
    top:-5px;
    
    
}
.main-menu .sub-menu{
    list-style:none;
    display:none;
    position:absolute;
    left:180px;
    top:41px;
    z-index:5;
    
}
.main-menu>li{
    border-bottom: 2px solid #2C3E50;
}
.main-menu a{
   background:#2980B9;
   display:block;
   padding:10px 10px;
   padding-left:15px;
   text-decoration:none;
   color:#FFFFFF;
}
.main-menu a:hover{
    background:#1ABC9C;
  
}
  
 .main-menu>li:hover .sub-menu{
     display:block;
  
} 
    
.main-menu .sub-menu a{
    border-bottom: 2px solid #2ECC71; 
    background:#1ABC9C;
    text-decoration:none;
    width:180px;
}
2

Привет!

Система в испытаниях сравнивает буквально две картинки: ваш результат и образец. Поэтому подразумевается, что подменю нужно сверстать именно в раскрытом состоянии, а не с появлением его по наведению на меню.

Для этого я заменил класс .main-menu>li:hover .sub-menu на .main-menu>li.opened .sub-menu. Уже хорошо, > 90% совпадения. Что можно поправить ещё?

Пункт меню «Курсы» тоже нужно покрасить в бирюзовый по классу opened.

Кроме того, у .main-menu нужно убрать отрицательные отступы, но устранить их причину: элементу ul браузер задаёт внутренний и внешний отступ по умолчанию, которые для нашей ситуации не подходят. Поэтому нужно подобрать нужные margin и padding у .main-menu, чтобы совпало с картинкой.

Теперь уже больше похоже на правду. Пользуйтесь режимами «Различия» и «Наложение» у мини-браузера — сразу станет понятно, где результат не совпадает с образцом.

3

Спасибо!!! Пойду разбираться с учетом рекомендаций.