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


#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 {
    width: 200px;
    margin:0;
    padding:0;
    list-style:none;
}
.main-menu > li > a {
    border-bottom: 2px solid #2C3E50;
}
.main-menu a {
    display:block;
    padding: 10px 15px;
    text-decoration: none;
    color:#FFFFFF;
}
.main-menu ul{
    padding:0;
    border-bottom: 2px solid #2C3E50;
}
.main-menu li{
    background-color:#2980B9;
}
.main-menu > .active > a {
    background-color: #1ABC9C;
}
.main-menu li li a{
    color:#2980B9;
    background:#FFFFFF;
    text-decoration:underline;
    padding-top: 15px;
}

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

Ваше решение допустимо, остаётся только подобрать отступы для ссылок подменю. Для этого можно для ссылки первого пункта списка сделать отступ сверху 15px, а для ссылки последнего пункта — отступ снизу 15px. Остальные верхние и нижние отступы всех ссылок подменю 5px.


#3

Спасибо за совет. Тоже пришел к выводу что через псевдоклассы придется отступы делать. А есть вариант, как сделать без их использования? И еще вопрос: как сделать фон только для подменю, тк я присвоил фон для всего меню и он вылазит, когда использую padding для подменю. Пробовал разные варианты, но что-то у меня не выходит.


#4

Как-то так.

Цвет фона для .main-menu.
Нижняя рамка для .main-menu>li.
Цвет фона и нижняя рамка для .main-menu>.active>a.
Для .main-menu ul белый цвет фона.


#5

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: 0;
padding: 0;
width: 200px;
list-style: none;
}
.main-menu > li {
border-bottom: 2px solid #2C3E50;
margin-bottom: -2px;
}
.main-menu a {
display: block;
text-decoration: none;
padding: 10px 15px;
background: #2980B9;
color: white;
}
.main-menu >.active >a {
background: #1ABC9C;
}
.main-menu li li a {
display: block;
list-style: none;
text-decoration: underline;
color: #2980B9;
background: #FFFFFF;
padding: 15px 0px 0px 15px;
}
.main-menu ul {
list-style: none;
padding: 0;
}
.main-menu li ul :last-child a {
padding: 10px 0px 15px 15px;
}
.main-menu > li {
border-bottom: 2px solid #2C3E50;
margin-bottom: -2px;
}
Помогите, пожалуйста! Почему нет рамок снизу блоков?


#6

из-за отрицательных отступов.


#7

пожалуйста! практически паддинги установила методом тыка. объясните мне, если возможно, все строчки моего кода, как они работают. результат 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{
padding: 0px;
margin: 0px;
list-style: none;
background-color: #2980B9;
width:200px;

}
.main-menu a{
display: block;
padding: 10px 15px;
margin:0px;
text-decoration:none;
color:#FFFFFF;
}
.main-menu>li{
border-bottom:2px solid #2C3E50;
}
.main-menu ul{
list-style:none;
background-color:#FFFFFF;
border-top:2px solid #2C3E50;
padding: 10px 10px;
}
.main-menu li li a{
color:#2980B9;
text-decoration: underline;
padding: 5px 5px;
}
.main-menu .active{
background-color: #1ABC9C;
}


#8

Что я сделал не так?


#9

Цвет ссылок подменю другой.


#10

Я их не менял, просто они посещенные. А какой же тогда цвет мне принудительно ставить?


#11

Этот цвет: #2980B9


#12

Помогите, не могу разобраться.
Может кто-то знает где ошибка?

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: 0;
margin: 0;
}
.main-menu .active > a {
display: block;
list-style: none;
text-decoration: none;
color: #ffffff;
background: #1ABC9C;
border-bottom: 2px solid #2C3E50;
padding: 10px 15px
}
.main-menu a {
width: 170px;
display: block;
list-style: none;
text-decoration: none;
color: #ffffff;
background: #2980B9;
border-bottom: 2px solid #2C3E50;
padding: 10px 15px;
}
.main-menu .active li > a {
display: block;
background: #ffffff;
border: 0;
color: #2980B9;
text-decoration: underline;
}
.main-menu .active ul a {
border-bottom: 2px solid #2C3E50;
margin-top: -2px;
}
.main-menu .active li {
width: 100%;
list-style: none;
margin-left: -40px;
}
.active > a {
border-bottom: 2px solid #2C3E50;
margin-bottom: 2px;
}


#13

Отрицательные отступы - это не очень хорошая практика. Здесь можно обойтись без них.
Ваш исправленный код:
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: 0;
margin: 0;
list-style: none;
width: 200px;
}
.main-menu .active > a {
/display: block;/
/list-style: none;/
/text-decoration: none;/
/color: #ffffff;/
background: #1ABC9C;
/border-bottom: 2px solid #2C3E50;/
/padding: 10px 15px;/
}
.main-menu a {
/width: 170px;/
display: block;
/list-style: none;/
text-decoration: none;
color: #ffffff;
background: #2980B9;
border-bottom: 2px solid #2C3E50;
padding: 10px 15px;
}
.main-menu .active li > a {
/display: block;/
background: #ffffff;
border: none;
color: #2980B9;
text-decoration: underline;
padding: 5px;
}
/.main-menu .active ul a {
border-bottom: 2px solid #2C3E50;
margin-top: -2px;
}
/
.main-menu .active li {
/width: 100%;/
list-style: none;
/margin-left: -40px;/
}
/.active > a {
border-bottom: 2px solid #2C3E50;
margin-bottom: 2px;
}
/
.main-menu ul {
margin: 0;
padding: 10px;
background: #ffffff;
border-bottom: 2px solid #2C3E50;
}
Всё, что закомментировано, вам не нужно. Всё, что выделено, надо дописать.
По поводу отрицательных отступов. Я понимаю, для чего вы хотели их использовать. Дело в том, что у подменю тоже есть отступы, которые необходимо обнулить (margin: 0;). Также для подменю отдельно прописывается фон. У ссылок подменю другие отступы (5px).
Для самого меню нужно указать ширину, поскольку она меньше, чем у body.
Еще хотелось бы обратить ваше внимание на следующее: свойство list-style: none; касается списка (пунктов списка), но не ссылок.
Будьте внимательны.
Если у вас возникнут другие вопросы, которые я возможно пропустила в объяснении, то напишите.


#14

ссылки подменю блочные в задании? Если блочные, то тогда надо белый фон и для подменю и для ссылок задавать, а если не блочные, то только для подменю?


#15

Да, все ссылки в этом задании - блочные элементы.


#16

Помогите пожалуйста, не отображаются нижние границы в рамках элементов подменю.
html, body {
margin: 0;
padding: 0;
}

body {
width: 380px;
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;
list-style: none;
}
.main-menu a {
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
border-bottom: 2px solid #2C3E50;
}
.main-menu >li {
position: relative;
background: #2980B9;
}
.main-menu .sub-menu {
position: absolute;
z-index: 10;
top: 0px;
left: 180px;
width: 200px;
margin: 0;
padding: 0;
list-style: none;
background: #1ABC9C;
/border-bottom: 2px; solid #2ECC71;/
}
.main-menu .sub-menu a {
border: 2px; solid #2ECC71;
}
.main-menu > .opened > a {
background: #1ABC9C;
}


#17

Ошибка в этом фрагменте:
.main-menu .sub-menu a {
border: 2px; solid #2ECC71;
}
Лишняя точка с запятой внутри свойства и сама рамка только снизу.
(Пожалуйста, в следующий раз пишите номер своего задания. Вы написали не в ту тему. Ваш код из 28/28)


#18

Спаибо! Буду внимательнее


#19

так вроде бы все совпадает. правда получилось убрать нижнюю линию в подменю, только закрасив белым цветом. может это не совсем правильно? помогите мне с кодом.
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 a{
display:block;
background-color: #2980b9;
padding-left:15px;
text-decoration:none;
color: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #2c3e50;

}
.active > a{
background: #1abc9c;
}
.main-menu li ul {
background-color: #ffffff;

}
.main-menu li ul a{
background-color: #ffffff;
color: #2980b9;
text-decoration: underline;
border-bottom:#ffffff;

}
ul {
list-style: none;

width: 200px;
margin: 0;
padding: 0;

}

ПОМОГИТЕ ПОЖАЛУЙСТА!! Я НЕ МОГУ ПРОЙТИ ЗАДАНИЕ!


#20

.main-menu li ul {
background-color: #ffffff;
padding: 10px;
width: 180px;
border-bottom: 2px solid #2c3e50;
}
.main-menu li ul a{
background-color: #ffffff;
color: #2980b9;
text-decoration: underline;
border: none;
padding: 5px;
}