15/28 100% Мое решение проблемы с отступами в меню 2го уровня

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

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

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

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

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

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

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

.main-menu li li a{
color:#2980b9;
text-decoration:underline;
margin:0px;
padding:5px 0px 5px 15px;
}

.main-menu li li:first-child{
padding-top:10px;
}

.main-menu li li:last-child{
padding-bottom:10px;
}

2
3

Я как раз эту проблему с меню второго уровня решил с помощью псевдоклассов :first и :last-child
тоесть:

Здесь прописываем ссылкам меню второго уровня и нижецвет, нижнее подчеркивание, внешние отступы и стандартные для всех ссылок отступы.

.main-menu li li a{
color:#2980b9;
text-decoration:underline;
margin:0px;
padding:5px 0px 5px 15px;
}

Сдесь добавил отступ сверху у первого элемента списка

.main-menu li li:first-child{
padding-top:10px;
}

а сдесь у последнего увеличил отступ снизу

.main-menu li li:last-child{
padding-bottom:10px;
}

Тоесть получается что у первого элемента отступ сверху 15 пикс справа 0пикс низ 5пикс слева 15 пикселей
у второго padding:5px 0px 5px 15px; (заданно для всех ссылок второго уровня и ниже)
а у третьего 5px 0px 15px 15px;

Ваш вариант кода сейчас попробую покавырять)

4

пока без результатно…
не могу понять откуда берется отступ у меню второго стиля.
очевидно что это li, но где задан сам отступ пока не нашел.
задавать отрицательный отступ для li и прибавлять паддинг бессмысленно.
менял фон, задавал его для ссылок, тоже не то…
интересная задачка)

5

видимо проще писать все заново :confused: