28/28 Испытание 100%. Нужен совет.

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

Нужен совет, насколько корректно данное написание и как можно было бы сделать более красиво и изящно. П.С данный вариант на 100%

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 {
position: relative;
margin: 0;
padding: 0;
}

.main-menu li {
display: block;
}

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

.main-menu .sub-menu {
position: absolute;
top: 41px;
left: 140px;
}

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

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

2

намана =) главное чтоб ссылка на весь элемент растягивалась. и 100% конечно же.
если сильно придираться, некоторые css линтеры не сильно жалуют сочетание явной ширины и отступов внутри одного правила, но это некст лвл)

3

все размеры и отступы кратны 5. top: 41px;- почему так?

4

разрабу влом переделывать) тут много таких заданий, где не всегда получится точно следовать этому правилу, чтобы на 100% сошлось

5

буду знать:+1:

6

ну на самом деле можно сделать и без 41пх но тут нужен другой метод позиционирования тогда.

7

Хотел бы услышать критику своего кода тоже!

   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 {
      width: 200px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

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

    .open a {
      background: #1abc9c;
    }

    .open .sub-menu a {
      width: 170px;
      border-bottom: 2px solid
      #2ecc71;
    }

    .open {
      position: relative;
    }

    .open .sub-menu {
      list-style: none;
      position: absolute;
      left: 140px;
      top: 0;
    }
8

обратите внимание, у вас не всё пространство пунктов меню кликабельное. подменю нормально, а вот основное справа имеет “пустышку”.
нужно было обнулить внутренний отступ у подменю (всегда помните, что у ul есть padding-left: 40px по-умолчанию)

9

Учту в будущем. Спасибо большое!