Помогите, запутался окончательно, как изменить отступы только для подменю между пунктами? И в целом мне кажется, что я изначально что-то не так сделал.
Ваше решение допустимо, остаётся только подобрать отступы для ссылок подменю. Для этого можно для ссылки первого пункта списка сделать отступ сверху 15px, а для ссылки последнего пункта — отступ снизу 15px. Остальные верхние и нижние отступы всех ссылок подменю 5px.
Спасибо за совет. Тоже пришел к выводу что через псевдоклассы придется отступы делать. А есть вариант, как сделать без их использования? И еще вопрос: как сделать фон только для подменю, тк я присвоил фон для всего меню и он вылазит, когда использую padding для подменю. Пробовал разные варианты, но что-то у меня не выходит.
пожалуйста! практически паддинги установила методом тыка. объясните мне, если возможно, все строчки моего кода, как они работают. результат 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: 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; касается списка (пунктов списка), но не ссылок.
Будьте внимательны.
Если у вас возникнут другие вопросы, которые я возможно пропустила в объяснении, то напишите.
Ошибка в этом фрагменте:
.main-menu .sub-menu a {
border: 2px; solid #2ECC71;
}
Лишняя точка с запятой внутри свойства и сама рамка только снизу.
(Пожалуйста, в следующий раз пишите номер своего задания. Вы написали не в ту тему. Ваш код из 28/28)
так вроде бы все совпадает. правда получилось убрать нижнюю линию в подменю, только закрасив белым цветом. может это не совсем правильно? помогите мне с кодом.
html,
body {
margin: 0;
padding: 0;
}
