Мастерская: создаём меню / Испытание: многоуровневое меню [15/28] Помогите пожалуйста.

Не могу поменять фон для ссылок подменю. При задании белого фона для .main-menu li li a ничего не меняется.Где ошибка?
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;
list-style: none;
width: 200px;

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

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

}

.main-menu .active a {
background: #1abc9c;
}
.main-menu li li a{
background: none;
text-decoration: underline;
color: #2980b9;
border: none;
padding: 5px 70px 5px 15px;
}

.main-menu .active ul {
padding: 10px 0;
border-bottom: solid 2px #2c3e50;
}

Белого фона не вижу. А почему 70px отступ справа, откуда так много?

Ой - это случайно старый вариант прислала.При подстановке background: #ffffff тоже ничего не происходит. Подменю у меня сейчас того же цвета что и .main-menu .active a - #1abc9c. 70 - т.к. ширина 200. Это, конечно, приблизительно, но текст встал на место при этих значениях.

Ширина задается списку ul. А отступы должны быть симметричными. Списку тоже можно задать фон.

Спасибо. Завтра попробую. На сегодня исчерпала попытки в задании.

Всё идеально совпадает, но подменю остаётся не того цвета!
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;
list-style: none;
width: 200px;

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

}
.main-menu a {
text-decoration: none;
color: #ffffff;
display: block;
background: #2980b9;
padding: 10px 15px 10px 15px;
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;
}

.main-menu .active ul {
padding: 10px 0;
border-bottom: solid 2px #2c3e50;
}

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;
list-style: none;
width: 200px;

}
.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
background:#ffffff;

}
.main-menu a {
text-decoration: none;
color: #ffffff;
display: block;
background: #2980b9;
padding: 10px 15px 10px 15px;
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 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>

Код CSS
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 ul {
list-style:none;
}

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

.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;
}
Понял ошибку, раньше у меня красилась при таком указании стилей только строчка с ссылкой и я думал что это ошибка, а на самом деле понял, что Вы не зря говорили растягивать не элементы основного списка, а сами ссылки внутри них. Спасибо. Сейчас попробую разобраться с рамкой. Какое же крутое ощущение приходит когда разбираешься в проблеме и осознаешь что нужно подправить и где что изменить)

1 лайк
ееее, 100% )) Проверьте пожалуйста на корректность код, что где не так может быть) 
КОД 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>

КОД CSS

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 ul {
list-style:none;
background: #ffffff;
padding: 10px 0px;

}

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

}

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

}

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

.main-menu .active li a {
display:block;
color: #2980b9;
padding: 5px 15px;
}

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

Ширину лучше писать для списка ul.
Дважды написали display: block; для ссылок.
Из селектора .main-menu .active li a вполне можно убрать li.
В остальном очень неплохо.

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;
padding: 0;
margin: 0;
list-style: none;
}
.main-menu ul {
padding: 0;
margin: 0;
list-style: none;
border-bottom: 2px solid #2c3e50;
}
.main-menu .active > a {
background: #1abc9c;
color: #ffffff;
text-decoration: none;
border-bottom: 2px solid #2c3e50;
}
.main-menu li ul a {
display:block;
background: #ffffff;
color: #2980b9;
padding: 5px 15px;
}
.main-menu > li > a {
display:block;
color: #ffffff;
background: #2980b9;
text-decoration: none;
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
}
.main-menu li ul {
padding-top: 10px;
background: #ffffff;
padding-bottom:10px;
}

У вас три правила описывают стили для ссылок. Некоторые свойства повторяются. Попробуйте перегруппировать, что немного сократить код.

Оцените пожалуйста код

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 ul {
padding: 10px 0;
background-color: #ffffff;
margin: 0;
list-style: none;
}

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

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

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


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

Ссылку дважды блочной объявляете, а в остальном хорошо.

1 лайк