Испытание: многоуровневое меню

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

100% но подскажите как сделать лаконичней

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

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

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

background-color: #ecf0f1;
}

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

.main-menu > li {
border-bottom: 2px solid #2c3e50;
}

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

.main-menu > .active > a {
background-color: #1abc9c;
border-bottom: 2px solid #2c3e50;
}

.main-menu ul {
padding: 0;
padding-top: 5px;
padding-bottom: 15px;
margin: 0;
list-style: none;
background-color: #ffffff;
}

.main-menu li li a {
text-decoration: underline;
color: #2980b9;
background-color: #ffffff;
padding: 0;
margin: 0;
padding-left: 15px;
padding-top: 10px;
}

2

а что смущает?

по мне, так padding’ов городить так не надо.
padding как и margin можно писать в одну строчку, например вы писали

padding: 0;
padding-left: 15px;
padding-top: 10px;

можно записать

padding: 10px,0,0,15px

тут главное запомнить порядок, он идет по часовой стрелке: верх, право, низ, лево

но не всегда это помогает, когда уже заданы паддинги и надо сместить только влево, то только padding-left, иначе padding как написал выше затрет исходные позиции. Так что имейте ввиду)

3

и мне видится, что делегирование в 2х местах list-style: none; не нужно, если оба не списки.
нужно помнить что это каскады потомки которых наследуют свойства, но не всегда))

4

Как это не списки?

5

у вас не очень понятно, .main-menu{list-style: none;} и .main-menu ul{list-style: none;}
ul понятно что список, а .main-menu может быть все что угодно

6

Почему же всё, что угодно? Из HTML видно, что это список: <ul class="main-menu">.
Да и само правило .main-menu{list-style: none;} какой смысл применять не к списку?