Не могу поменять фон для ссылок подменю. При задании белого фона для .main-menu li li a ничего не меняется.Где ошибка?
html,
body {
margin: 0;
padding: 0;
}
Ой - это случайно старый вариант прислала.При подстановке background: #ffffff тоже ничего не происходит. Подменю у меня сейчас того же цвета что и .main-menu .active a - #1abc9c. 70 - т.к. ширина 200. Это, конечно, приблизительно, но текст встал на место при этих значениях.
.main-menu > .active > a {
** background: #1abc9c; **
}
.main-menu li li a {
background: #ffffff;
text-decoration: underline;
color: #2980b9;
border: none;
padding: 5px 15px 5px 15px;
}
.main-menu .active ul {
padding: 10px 0;
border-bottom: solid 2px #2c3e50;
}
Поменяла строку(выделено жирным) и всё получилось. Но всё равно не понимаю, почему не работает первый вариант. Там .main-menu .active a { background: #1abc9c; }
.main-menu li li a { background: #ffffff;
text-decoration: underline;
color: #2980b9;
border: none;
padding: 5px 70px 5px 15px;
}
получается первым правилом я определяю цвет #1abc9c для всех ссылок, но второе, по идее, приоритетнее и должно задавать белый фон для ссылок в подсписке?
По поводу 8 задания примерно понял, спасибо. Значения отступов none в одном месте увидел, в другом нет, поэтому остались.
У меня сразу, пока горячо, пара вопросов по 15 испытанию, остановился пока вот на таком коде:
Код HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: многоуровневое меню</title>
</head>
<body>
<ul class="main-menu">
<li class="active">
<a href="/courses">Курсы</a>
<ul>
<li><a href="/courses/4">Знакомство</a></li>
<li><a href="/courses/42">Селекторы</a></li>
<li><a href="/courses/45">Позиционирование</a></li>
</ul>
</li>
<li><a href="/demos">Демонстрации</a></li>
<li><a href="/public_profiles">Участники</a></li>
<li><a href="/achievments">Достижения</a></li>
</ul>
</body>
</html>
.main-menu > li > a {
color:#ffffff;
text-decoration:none;
}
.main-menu .active {
background:#1abc9c;
}
К оформлению подменю еще не приступал. Итак вопросы:
Почему у меня первый пункт основного меню оформляется сам по себе - нету нижней рамки.
Второй вопрос: как достичь изменением селекторов чтобы окрашивался в зеленый фон только пункт главного меню, а не он плюс подменю,или же это нормально и потом просто окрасить фон у подменю отдельно?
Есть рамка. Дело в том, что подменю находится внутри первого пункта основного меню, и рамка отображается уже после подменю. (Класс списку подменю задайте)[quote=“ValentinValidniy, post:10, topic:5297”]
как достичь изменением селекторов чтобы окрашивался в зеленый фон только пункт главного меню, а не он плюс подменю,или же это нормально и потом просто окрасить фон у подменю отдельно?
[/quote]
Можно окрашивать пункты подменю отдельно, пользуясь правилом переопределения свойств. Можно также задавать фон пунктам только основного меню, используя дочерний селектор >
Задание № 8 доделайте.
8 задание переделаю, как попытки появятся новые.
А вот по этому сообщению не понял если честно.
По первому вопросу - если рамка есть то как конкретно ее отобразить у первого пункта основного меню? Что значит задайте класс списку подменю?
По второму вопросу - дочерний селектор как именно применять?
Если так
.main-menu > .active {
background:#1abc9c;
то окрашивается все полностью вместе с подменю,
Если так .main-menu > li {
width:200px;
border-bottom: solid #2c3e50 2px;
background: #2980b9;
padding:15px;
}
то в цвет окрашиваются все пункты основного меню.
Не понимаю тогда как именно его применить, чтобы окрасился только первый пункт основного меню, на ум лезет только nth-child для первого элемента.
Можно, пожалуйста, подробнее ответить на вопрос, я еще далеко не профи, и не могу быстро сориентироваться, я только учусь и надеюсь, что Вы мне поможете в этом. Спасибо.
Рамку вы можете прописать для ссылки первого пункта меню.
Для выбора списка подменю вы пользуетесь селектором .main-menu ul. Я вам предлагаю для подменю задать отдельный класс. Тогда можно будет оба списка стилизовать отдельно и стили не будут пересекаться.
Что касается дочернего селектора, то ваш вопрос не так прочитала.
Здесь, конечно, лучше использовать класс .active. А подменю можно ниже перекрасить, воспользовавшись правилом переопределения стилей.
Спасибо, но буквально только что решил проблему путем задания стиля для
.main-menu .active > a {
background:#1abc9c;
}
Понял ошибку, раньше у меня красилась при таком указании стилей только строчка с ссылкой и я думал что это ошибка, а на самом деле понял, что Вы не зря говорили растягивать не элементы основного списка, а сами ссылки внутри них. Спасибо. Сейчас попробую разобраться с рамкой. Какое же крутое ощущение приходит когда разбираешься в проблеме и осознаешь что нужно подправить и где что изменить)
Маркеры сбросили только у подменю, у основного тоже надо.
Ширину лучше писать для списка ul.
Дважды написали display: block; для ссылок.
Из селектора .main-menu .active li a вполне можно убрать li.
В остальном очень неплохо.
