Мастерские, глава 1.Испытание выпадающее меню 28/28. При сравнении блок подменю оказывается в середине основного меню. В чём ошибка в коде ?

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

html,
body {
margin: 0;
padding: 0;
}

body {
width: 380px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}
.main-menu{
padding:0px;
margin:0px;
list-style:none;

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

}
.main-menu>li>a{
display:block;
padding:10px 15px;
border-bottom:2px solid #2c3e50;
text-decoration:none;
color:white;
background-color:#2980b9;
width:170px;
}
.main-menu>.open>a{
background-color:#1abc9c;
position:relative;
}
.main-menu .sub-menu>li a{
display:block;
padding:10px 15px;
border-bottom:2px solid #2ecc71;
text-decoration:none;
color:white;
background-color:#1abc9c;
width:170px;
}
.main-menu .sub-menu{
position:absolute;
right:165px;
top:51px;
z-index:10;
}

2

right:165px; вот это поменяйте на left:150px;

в редакторе тоже муть какая то. если right: 10px; задать, то задание засчитывается, но по факту это вообще нифига не так как задумывалось.

с шириной ссылок тоже намудрили, там есть некликабельное место справа на менюшках.
оставьте ссылкам паддинг, а размеры задавайте элементам li

муть какая-то, всяких лишних свойств насовали.
position:relative; вот это вообще не знаю для чего тут стоит, ведь ссылка не родитель (да и вообще не нужен).
z-index:10; не нужен, у нас элемент идет позже в разметке и имеет абсолютное позиционирование.
color:white; не критично, но лучше указывайте как в ТЗ.
ну и по классике, сгруппируйте селекторы по свойствам. много повторов.

3

Спасибо, завтра попробую проверить, сегодня закончились попытки.

4

Переписал код с нуля. Проверьте пожалуйста.

html,
body {
margin: 0;
padding: 0;
}

body {
width: 380px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}
.main-menu{
padding:0px;
margin:0px;
list-style:none;
width:200px;
}
.main-menu>li{
padding:10px 15px;
background-color:#2980b9;
border-bottom:2px solid #2c3e50;
position:relative;
}
.main-menu .open{
background-color:#1abc9c;
}
.main-menu a{
text-decoration:none;
color:white;
display:block;
}
.main-menu .sub-menu{
position:absolute;
z-index:10;
left:140px;
top:0px;
width:200px;
list-style:none
}

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

5

я ж сказал ссылкам паддинги сделать вместо списочных элементов. у вас некликабельное пространство на кнопках.
задание по факту 100%, но не функционально.

почувствуйте разницу 
html,
body {
margin: 0;
padding: 0;
}

body {
width: 380px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px;
  background: #2980b9;
}


.main-menu .open {
  position: relative;
  background: #1abc9c;
}
.main-menu a {
  display: block;
  padding: 10px 15px;
  border-bottom: 2px solid #2c3e50;  
  color: white;
  text-decoration:none;
}

.main-menu .sub-menu {
  position: absolute;
  left: 180px;
  top: 0;
  background: #1abc9c;
  z-index: 10;
}

.main-menu .sub-menu a {border-color: #2ecc71;}
6

Понял, спасибо.