Помогите пожалуйста понять в чем была ошибка. 28/28

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

Здравствуйте. При первом прохождении написал код, который не смог выставить ровно, чтобы координаты были кратны 5. Долго парился, пытаясь его изменить, но не вышло. Потом просто стер его и написал новый и закрыл испытание, но так и не понял в чем была ошибка старого. Если не трудно, объясните пожалуйста.

.main-menu{
padding: 0;
margin: 0;
list-style:none;
width: 200px;
}

.main-menu li{
list-style: none;}


.main-menu a{
display: block;
text-decoration: none;
padding: 10px;
padding-left: 15px;
position: relative;
background: #2980B9;
color: #fff;
border-bottom: 2px solid #2C3E50;
}

   .main-menu .sub-menu{
position: absolute;
z-index: 2;
left: 150px;
bottom: 125px;
width: 200px; 
}

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

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

   .main-menu .opened a{
background: #1ABC9C;
}
2

не знаю в чем была ошибка в предыдущем коде, но в этом у вас тоже ошибка есть.
вы задаете для .main-menu a position: relative; очевидно для того, чтобы относительно этой ссылки спозиционировать подменю (для которого прописываете position: absolute). Но <a> не является родителем для подменю, и поэтому позиционироваться оно будет все равно относительно окна браузера.
Если вы все же хотите привязать подменю к основному меню, то position:relative надо задавать для li (ведь именно li является родителем для .sub-menu)

3

Этот код как раз с ошибкой). Спасибо, теперь понял)