Ищу ошибки в коде. Испытание: выпадающее меню{28/28}

Курсы §13. Мастерская: создаём меню
1

Кто подскажет, как можно упростить код и у кого есть какие замечания Задание попадает в 100%, браузер почему-то выводит меню два раза, но так не только с этом заданием.
HTML не менялся, он блокировался в задании

<body>

    <ul class="main-menu">
        <li><a href="/demos">Демонстрации</a></li>
        <li class="opened">
            <a href="/courses">Курсы</a>
            <ul class="sub-menu">
                <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="/public_profiles">Участники</a></li>
        <li><a href="/achievments">Достижения</a></li>
        <li><a href="/profile">Профиль</a></li>
    </ul>

</body>

Код:

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;
padding: 0;
margin: 0;
list-style: none;
}
.main-menu > li {border-bottom: 2px solid #2c3e50;}

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

.main-menu a:hover {background: #1abc9c;}

.main-menu .sub-menu{
position:absolute;
list-style: none;
top: 51px;
left: 150px;
z-index: 10;
}

.main-menu li li a {
background: #1abc9c;
width:170px;
color: #ffffff;
border-bottom: 2px solid #2ecc71;
}

.main-menu li li a:hover {
text-decoration: underline;
background: none;
}
.opened a{background:#1abc9c;}

4
4.jpg960×608 84.5 KB

2

Сохраняем HTML и CSS в файлах.
Чтобы увидеть ошибки нужно переместить меню, например, ниже и левее.
Изменяем в CSS margin для меню, сохраняем, смотрим в браузере.
menu1
Субменю не на своём месте.
Это происходит потому, что субменю позицианировано относительно body, а должно быть привязано к li.
Тогда каждое из субменю будет всплывать относительно указанного элемента.
Повторить position: relative; и position: absolute;. https://htmlacademy.ru/courses/50/run/21
menu2
Ну, здесь просто цвет не тот.

Следует, еще обратить внимание вот на что:
Возможно, в некоторых случаях дизайн предусматривает субменю открытым по умолчанию.
Но, в обычных стандартных меню, – всплывающие и выпадающие менюшки должны появляться при наведении (логично?) на элементы основного меню.
Повторить: display: none; https://htmlacademy.ru/courses/50/run/23

…некоторые мелочи в CSS оставим на потом…

1 лайк
3

Исправила первые замечания, код:

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;
padding:0;
margin: 0;
list-style: none;}

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

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

.main-menu a:hover {background: #1abc9c;}

.main-menu .sub-menu {
position:absolute;
top: 0;
left:140px;
list-style: none;
z-index: 10;}

.main-menu > li { position: relative;}

.main-menu li li a {
background: #1abc9c;
width:170px;
color: #ffffff;
border-bottom:2px solid #2ecc71;}

.main-menu li li a:hover {
text-decoration: none;
background: #1abc9c;}

.opened a{background:#1abc9c;}

4

А теперь меню появляется при наведении на ячейку "Курсы"
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;
padding:0;
margin: 0;
list-style: none;}

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

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

.main-menu a:hover {background: #1abc9c;}

.main-menu .sub-menu {
position:absolute;
top: 0;
left:140px;
list-style: none;
z-index: 10;
display:none;}

.main-menu > li { position: relative;}

.main-menu > li:hover .sub-menu {
display: block;}

.main-menu li li a {
background: #1abc9c;
width:170px;
color: #ffffff;
border-bottom:2px solid #2ecc71;}

.main-menu li li a:hover {
text-decoration: none;
background: #1abc9c;}

.opened a{background:#1abc9c;}

5

:blush: Кто бы мог подумать, – бывает и такое при 100%.

У вас курсор в “мёртвой зоне”.
dead-zone

6

Исправила, но с помощью margin, не знаю насколько это правильно.

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;
padding:0;
margin: 0;
list-style: none; }

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

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

.main-menu a:hover {background: #1abc9c; }

.main-menu .sub-menu {
position:absolute;
top: 0;
left:180px;
list-style: none;
z-index: 10;
display:none;}

.main-menu > li { position: relative;}

.main-menu > li:hover .sub-menu {
display: block;}

.main-menu li li a {
background: #1abc9c;
width:170px;
margin-left:-40px;
color: #ffffff;
border-bottom:2px solid #2ecc71;}

.main-menu li li a:hover {
text-decoration: none;
background: #1abc9c;}

.opened a{background:#1abc9c;}

7

Мне кажется это не совсем корректным выходом…

Вам не пришлось бы использовать margin: -40px;, если бы вы обнулили отступы у субменю.

Посмотрите на .main-menu – задали размер, обнулили отступы, убрали маркеры. Всё правильно.
Посмотрите на .main-menu .sub-menu – маркеры убрали, а отступы по умолчанию остались, и размер пришлось поправлять через ссылки.

Эти два правила у Вас в разных местах: может быть стоит объединить?

.main-menu > li {border-bottom: 2px solid #2c3e50;}
.main-menu > li { position: relative;}

Что делает это правило?

.main-menu li li a:hover {
    text-decoration: none;
    background: #1abc9c;
}
8

Абсолютно с Вами согласна, действительно проще обнулить. Исправила в коде. А этот блок хотела сделать тоже, чтоб при наведении цвет менялся, он изначально и менялся, а потом решила… что это будет лишним, но вместо того, чтоб убрать сам блок, задала подсветке цвет родителя. Это невнимательность, спасибо. Удалила

9 
.main-menu li li a:hover {
    text-decoration: none;
    background: #1abc9c;
}

Я вовсе не предлагал это правило удалять.
Хотел спросить, зачем text-decoration: none;, если оно и так none.
Зачем background: #1abc9c;, если он и так #1abc9c.

У себя я это правило оставил с другим цветом… так меню выглядит веселее.

10

Да,я знаю, что можно его оставить. Просто решила именно в этом случае его удалить.
А Вы html5 еще не проходили?
Не могу с одним вопросом разобраться, уже устала(