Может быть это потому что Вы задаете фон li, а не ссылкам. Ссылки то ведь блочные.
Я поэтому в самом начале и спрашивал
Свойства блочных и строчных элементов рассматриваются в курсе “Блочная модель документа” https://htmlacademy.ru/courses/44/
Поэтому здесь вкратце:
Что касается li – то он (в отличие о тега a) блочный по умолчанию.
При прохождении испытания,
изменяя его размеры можно получить внешний вид согласно образцу.
Но, если при этом ссылки оставить строчными, – то при наведении они будут срабатывать только в пределах надписи,
что не совсем удобно…
Поэтому лучше ссылки сделать блочными,
отступами изменить их размеры, увеличивая зону срабатывания.
Ну, и остальные свойства: цвет, фон лучше изменять ссылкам.
Правда, border, в этом испытании, всё же удобнее оставить у элементов li.
Фоновый белый цвет можно присвоить и main-menu > li, и просто main-menu.
Ссылки его перекрывают там где это нужно.
В этой ветке уже достаточно информации, чтобы справиться с испытанием.
Выкладывайте следующий вариант, возможно останутся ещё вопросы…
Всем здоровья! Кажется решил задачу.
.main-menu, ul {/* обнуляем стили списков*/
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}
.main-menu a {/* делаем ссылки блочными, задаем отступы и синий фон, цвет, /
display: block;
text-decoration: none;
padding: 10px 15px;
color: white;
background: #2980b9;
}
.active a {/ задаем зеленый фон активной ссылке*/
background: #1abc9c;
}
.main-menu ul a {/* задаем белый фон, цвет, подчеркивание ссылкам подменю*/
text-decoration: underline;
color: #2980b9;
padding: 5px 10px;
background: #ffffff;
}
.main-menu > li > a {/задаем нижние бордеры ссылкам меню/
border-bottom: 2px solid #2c3e50;
}
[href="/demos"] {/верхний бордер второму пункту меню селектором по атрибуту/
border-top: 2px solid #2c3e50;
}
.main-menu ul {/задаем подменю отступы, фон и бокс-сайзинг чтобы блочные ссылки не выступали из родителя/
padding: 10px 5px;
background: #ffffff;
box-sizing: border-box;
}
Для меня было сложностью понять, что надо задать padding и подменю и ссылкам подменю. Помогло повторение урока [12/28] “Переносим рамки, задаем отступы подменю”. А в задании обратил внимание на фразу: " И у подменю, и у пунктов подменю есть свои отступы".
Совпадение 100%. Можно селекторы, кстати, выбирать по другому. Я сделал несколько разных вариантов.
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: 0px;
padding: 0px;
list-style: none;
}
a{
display: block;
background-color: #2980b9;
border-bottom: 2px solid #2C3E50;
padding: 10px 10px;
text-decoration: none;
color: white;
}
.active > a{
background-color: #1ABC9C;
}
li{
list-style: none;
background:white;
}
li li a {
background-color: white;
color: #2980b9;
text-decoration: underline;
border: 0px;
}
ul{
margin: 0;
padding: 0px;
}
Сейчас стоит задача выровнять текст в подменю, паддинги не вариант, так как выравниваешь топ у верхнего, едет нижний. Видела, что многие тут задают белый фон и пользуются марджинами, но ведь тогда получается что края этих блоков получатся не кликабельными?
выше решение на 100%, разберите его самостоятельно и если что-то будет не ясно, то задатите конкретный вопрос