Испытание: многоуровневое меню Что скажете о коде?

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

Добрый день!
Подскажите - код очень большой и можно намного проще ?Выполнен на 100%

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

body {
width: 280px;
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;
list-style:none;
}
.main-menu > li {
border-bottom:2px solid #2C3E50;
}
.main-menu a {
display:block;
text-decoration:none;
color:white;
}
.main-menu .active > a {
background:#1ABC9C;
border-bottom:2px solid #2C3E50;
padding:10px 0px 10px 15px;
}
ul {
background:#FFFFFF;
list-style:none;
padding:0px;
}
.main-menu li li a {
color:#2980B9;
padding:10px 0px 0px 15px;
text-decoration:underline;
}
.main-menu li li:last-child {
padding:0px 0px 15px 0px;
}
.main-menu li li:first-child {
padding:5px 0px 0px 0px;
}
.main-menu li:last-child {
padding:10px 0px 10px 15px;
}
.main-menu > li:nth-child(2) {
padding:10px 0px 10px 15px;
}
.main-menu > li:nth-child(3) {
padding:10px 0px 10px 15px;
}

2

Можно чуть упростить, не задавая отступы отдельно для каждого пункта.
html, body {
margin: 0;
padding: 0;
}

body {
width: 280px;
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;
list-style:none;
}
.main-menu > li {
border-bottom:2px solid #2C3E50;
}
.main-menu a {
display:block;
text-decoration:none;
color:white;
padding:10px 0px 10px 15px;
}
.main-menu .active > a {
background:#1ABC9C;
border-bottom:2px solid #2C3E50;
padding:10px 0px 10px 15px;
}
ul {
background:#FFFFFF;
list-style:none;
padding:0px;
}
.main-menu ul {
padding-top: 5px;
padding-bottom: 15px;
}
.main-menu li li a {
color:#2980B9;
padding:10px 0px 0px 15px;
text-decoration:underline;
}
/.main-menu li li:last-child {
padding:0px 0px 15px 0px;
}
.main-menu li li:first-child {
padding:5px 0px 0px 0px;
}
.main-menu li:last-child {
padding:10px 0px 10px 15px;
}
.main-menu > li:nth-child(2) {
padding:10px 0px 10px 15px;
}
.main-menu > li:nth-child(3) {
padding:10px 0px 10px 15px;
}/

1 лайк
3

Спасибо,действительно компактней =)

1 лайк