28/28 100% оцените код пожалуйста

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

body {
width: 380px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
.main-menu {
background-color: #2980b9;
width: 200px;
padding: 0;
margin: 0;
}
.main-menu >li{
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
position: relative;
}
.main-menu > li > a {
color: #ffffff;
text-decoration: none;
}
.main-menu .opened {
background-color: #1abc9c;
}
.main-menu .opened .sub-menu {
position: absolute;
background-color: #1abc9c;
list-style: none;
padding:0;
left: 180px;
top: 0;
width: 200px;
z-index: 10;
}
.main-menu .opened .sub-menu li{
border-bottom: 2px solid #2ecc71;
padding: 10px 15px;
}

.sub-menu a {
color: #ffffff;
text-decoration: none;

Это должны быть стили ссылок.

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

Да, не срабатывает, точнее, срабатывает частично, т.к. ссылки - это СТРОЧНЫЕ элементы, они не могут воспринять вертикальные отступы. Для этого задают им display: block - и тогда всё начинает работать. Кроме того, у Вас 2 селектора, которые содержат аналогичные свойства и дублируют друг друга: .main-menu > li > a и .sub-menu a. Для чего? Замените .main-menu > li > a на .main-menu a, тогда становится не нужен .sub-menu a. И добавьте в .main-menu a { display: block; padding: 10px 15px;} (только не забудьте убрать в этом случае padding из li). К тому же, не рекомендуется делать такие огромные по вложенности селекторы - .main-menu .opened .sub-menu li: вполне будет достаточно .sub-menu li; Или: .main-menu .opened .sub-menu - можно заменить на .main-menu .sub-menu, иначе, когда будете делать более сложные проекты, замучаетесь переопределять свойства - придётся делать такой же огромный по вложенности селектор, чтобы перебить необходимое свойство ниже.

2 лайка

как все подробно, спасибо!

Так же прошу оценить код.

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

body {
    width: 380px;
    min-height: 280px;
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #ecf0f1;
}

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

.main-menu > li {
    position: relative;
}

.main-menu a {
    display: block;
    background: #2980b9;
    color: #ffffff;
    border-bottom: 2px solid #2c3e50;
    text-decoration: none;
    padding: 10px 15px;
}

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

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

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