Прошу подсказки! Как уменьшить padding в подменю? Спасибо!

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

CSS code:

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

.main-menu>li {
background:#2980b9;
color:#ffffff;
}

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

.main-menu a {
color:#ffffff;
text-decoration:none;
display:table;
padding:10px 15px;
width:160px;
}

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

.main-menu ul {
padding:0px;
margin:0px;
list-style:none;
text-decoration:underline;
background:#ffffff;
border-bottom:2px solid #2c3e50;
}

.main-menu ul a {
color:#2980b9;
}

Для ссылок в подменю задавайте другие отступы, по 5px сверху и снизу. А для списка подменю по 10px сверху и снизу.

Спасибо, однако я добавил и всё ещё не добираются проценты.

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

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

.main-menu>li {
background:#2980b9;
color:#ffffff;
}

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

.main-menu a {
color:#ffffff;
text-decoration:none;
display:table;
padding:10px 15px;
width:160px;
}

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

.main-menu ul {
padding:0px;
margin:0px;
list-style:none;
text-decoration:underline;
background:#ffffff;
border-bottom:3px solid #2c3e50;
padding-top:5px;
padding-bottom:5px;
}

.main-menu ul a {
color:#2980b9;
padding-top:5px;
padding-bottom:5px;
}

Вкладка “Различия” о многом вам бы подсказала, например, о том, что рамка 3px - это многовато, или что ширина ссылок не соответствует образцу, или о том, что в подменю ссылки подчеркнуты. Смотрите внимательно и сравнивайте.