Испытание: многоуровневое меню [15/28]


#21

ура! 100%! спасибо! сорри за дубляж. очень нетерпелось пройти дальше).


#22

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

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

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

.main-menu ul {
border-top: 2px solid #2c3e50;
background-color: #ffffff;
padding: 10px;
margin: 0;
}

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

.main-menu li li {
display: block;
padding: 5px;
}

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

Прошу оценки!


#23

элементы списка и так являются блочными по умолчанию. Зачем вы для них прописываете display: block; ?


#24

+ padding: 5px; лучше для ссылок писать.


#25

Спасибо, не подумал просто!


#26

Каким тогда образом сделать промежутки между ссылками? паддинг не работает , маргин тоже


#27

Перед тем как задавать отступы ссылкам, нужно поменять их тип на блочный. Тогда свойство padding будет работать.


#28

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 {
width: 200px;
list-style: none;
margin: 0px;
padding: 0px;
}
.main-menu > li {
background:#2980b9;
border-bottom: 2px solid #2c3e50;

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

}
.main-menu > .active > a {
background:#1abc9c;
border-bottom: 2px solid #2c3e50;
}
.main-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
background: #ffffff;

}
.main-menu li li a {
display: block;
padding: 5px 15px;
background: #ffffff;
color: #2980b9;
text-decoration: underline;
}
.main-menu li li:last-child a {
padding-bottom: 15px;
}
.main-menu li li:first-child a {
padding-top: 15px;
}


Нужна помощь Испытание: многоуровневое меню
#29

Код будет короче, если отступы из двух последних правил задать для ul подменю.


#30

Огромное спасибо за подсказку, честно говоря не сразу такое заметишь и обратишь внимание когда пишешь код (видимо у меня еще очень мало опыта и понимания программирования в целом)

Исправил
.main-menu ul {
list-style: none;
margin: 0px;
padding: 10px 0px 10px 0px;
background: #ffffff;


#31

padding: 10px 0; короче)


#32

всем привет! я не знаю баг ли это, но проверка не работает :frowning:
вот мой код:
html,
body,
ul
{
margin: 0;
padding: 0;
}

body {
box-sizing: border-box;
display: flex;
width: 280px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

ul {
flex-direction: column;
display: flex;
width: 200px;
}

ul li,
.active > ul li {
flex-direction: column;
display: flex;
}

.active {
background: #1abc9c;
}

.active > ul li {
border-bottom: none;
background: #fff;
}

li {
background: #2980b9;
border-bottom: 2px solid black;
}

.active > ul a {
margin: 17px 0 0 15px;
color: #005580;
text-decoration: underline;
list-style-type: none;
}

.active > ul li:nth-child(2) a {
margin: 10px 0 0 15px;
}

.active > ul li:nth-child(3) a {
margin: 10px 0 15px 15px;
}

a {
margin: 10px 0 10px 15px;
color: #fff;
text-decoration: none;
list-style-type: none;
}

по перфект пикселю - идеально. а до сих пор по программе холодно ((( кто разбирается - что я делаю не так?


#33

Скорее всего дело в флексах, которые вы использовали. Причем писали их где только можно. Чем не угодила стандартная блочная модель?


#34

Здравствуйте, я тоже не могу пройти это задание, и просмотрев задания других выше в этой теме, у всех код разнится, а у меня визуально все так и очень похоже, но программа не пропускает. В чем моя ошибка?
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{
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}
.main-menu a {
display: block;
padding: 8px 14px;
text-decoration: none;
color: #2980b9;

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

.main-menu ul {
margin: 0;
padding: 5px 0;
list-style: none;
text-decoration: underline;
background-color:#ffffff;
color:#1abc9c;
}

.main-menu > li > a{
border-bottom: 2px solid #2c3e50;
background-color:#2980b9;
color:#ffffff;
}
.main-menu > li:nth-child(2){
border-top: 2px solid #2c3e50;

}

#35

Отступы у ссылок подменю будут другие, и помните о кратности пяти. Это поможет вам подобрать правильные величины.


#36

Я пробовала 10 и 15пикселей, но всеравно не то.


#37

Пробуйте еще, только помните, что в подменю у ссылок отступы меньше.


#38

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

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 {
width: 200px;
margin: 0;
padding: 0;
background: #ffffff;
}

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

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

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

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

}

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


#39

Хороший код, всё правильно.


#40

Мне кажется, код можно было сделать проще, хоть и всё верно >_<
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 {
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}
.main-menu .active .a {
border-bottom: 2px solid;
}
.main-menu a {
display: block;
text-decoration: none;
}
.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.main-menu > .active > a {
background-color: #1abc9c;
padding: 10px;
padding-left: 15px;
color: white;
border-bottom: 2px solid #2c3e50;
}
.main-menu ul a {
color: #2980b9;
text-decoration: underline;
}
.main-menu > li > a {
border-bottom: 2px solid #2c3e50;
color: white;
background-color: #2980b9;
padding: 10px;
padding-left: 15px;
}
.main-menu ul li {
background-color: white;
color: #2980b9;
text-decoration: underline;
padding-top: 10px;
padding-left: 15px;
}
.main-menu ul li:last-child {
border-bottom: 2px solid #2c3e50;
}
.main-menu ul li:last-child > a {
padding-bottom: 15px;
}
.main-menu ul li:first-child > a {
padding-top: 5px;
}