[15/28] 97% Что не так?

Курсы §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;
}
ul {
list-style: none;
margin: 0;
padding: 0;
width: 200px;

}

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

.main-menu ul li a {
padding 10px 5px;
display:block;
color: #2980b9;
padding: 5px 15px;
}

.main-menu .active > a {
background: #1abc9c;
}
.main-menu ul {
border-bottom: 2px solid #2c3950;
background: #ffffff;
padding: 10px 0;
}

2

У .main-menu ul li a padding задан два раза.

3

.main-menu {
width:200px;
list-style:none;
margin:0;
padding:0
}
.main-menu ul {
list-style:none;
padding:0;
margin:0;
}
.main-menu > li {
background:#2980b9;
border-bottom:2px solid #2c3e50;
}
.main-menu a {
display:block;
text-decoration:none;
padding:10px 15px;
color:#ffffff;
}
.main-menu .active a{
display:block;
background: #ffffff;
color:#2980b9;
text-decoration:underline;
padding:10px 15px;
}
.main-menu > .active > a{
background:#1abc9c;
color: #ffffff;
text-decoration:none;
border-bottom:2px solid #2c3e50;
padding:10px 15px;
}
Почему второе меню в размер не попадает? Убавление\добавление 5px ничего не решает. Они либо ниже чем надо, либо выше.

4

надо добавить паддинг сверху и снизу в .main-menu ul

1 лайк
5

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

6

Попробуйте задать списку белый фон

7

Задайте паддинги “10px 15px” и цвет фона для “.main-menu ul”. А паддинги для ссылок подменю “5px 0”. Кроме того, “.main-menu .active a” задает правила одновременно для активной ссылки меню и ссылок подменю. Может лучше написать для них отдельные правила?

1 лайк
8

Во, сразу 100%, спасибо) Но только я так и не понял, как мы определили что в образце у ссылок подменю именно такой отступ? Предположили просто? )
2. Зачем мы прописываем паддинг для .main-menu ul если мы его ссылкам в этом самом меню прописываем и они получаются вроде как в размер? Ну или по другому, как определить визуально что паддинг для ММ не прописан? ) Глазками опять же?)
Просто в предыдущих тренировочных заданиях вроде как советовали паддинг для ММ убирать и прописывать непосредсвенно ссылкам. Я неправильно понял?)

9

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