Многоуровневое меню не работает, как пофиксить?

Question

Vl0d0 @Vl0d0

HTML
CSS

Многоуровневое меню не работает, как пофиксить?

Создал 3-х уровневое меню, с двумя уровнями все норм. Но при наведении на пункт на 2 уровне (в котором еще один уровень) показываются сразу все пункты с 3-х уровней. Как это можно пофиксить?

Вопрос задан более трёх лет назад
102 просмотра

2 комментария

Подписаться 2 Простой 2 комментария

Vl0d0 @Vl0d0 Автор вопроса

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Горизонтальное многоуровневое меню</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <ul id="menu-header" class="menu">
        <li id="menu-item" class="menu-item"><a>Пункт 1</a>
            <ul class="sub-menu">
                <li id="menu-item" class="menu-item"><a href="#" aria-current="page">Пункт 1.2</a></li>
            </ul>
        </li>
        <li id="menu-item" class="menu-item"><a>Пункт 2</a>
            <ul class="sub-menu">
                <li id="menu-item" class="menu-item"><a>Пункт 2.1</a>
                    <ul class="sub-menu">
                        <li id="menu-item" class="menu-item"><a>Пункт 2.1.1</a></li>
                        <li id="menu-item" class="menu-item"><a>Пункт 2.1.2</a></li>
                        <li id="menu-item" class="menu-item"><a>Пункт 2.1.3</a></li>
                    </ul>
                </li>
                <li id="menu-item" class="menu-item"><a href="#">Пункт 2.2</a>
                    <ul class="sub-menu">
                        <li id="menu-item" class="menu-item"><a>Пункт 2.2.1</a></li>
                        <li id="menu-item" class="menu-item"><a>Пункт 2.2.2</a></li>
                        <li id="menu-item" class="menu-item"><a>Пункт 2.2.3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

CSS

#menu-header {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #5f727f;
    background: #fff;
    border: 1px solid #dfe5e8;
    width: 300px;
}

#menu-header a {
    display: block;
    width: 100%;
    padding: 10px;
    color: #5f727f;
    transition: 0.1s all;
}

#menu-header a:hover {
    color: #fff;
    background: #729fca;
    padding: 10px 0 10px 20px;
    border-left: 3px solid #4179ae;
}

.sub-menu > .sub-menu {
    color: red;
}

.sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #5f727f;
    background: #f4f6f7;
    border: 1px solid #dfe5e8;
    position: absolute;
    width: 300px;
    left: 300px;
    z-index: 1000;
    opacity: 0;
    top: -9999em;
}
.menu-item {
    position: relative;
}

.menu-item:hover .sub-menu {
    opacity: 1;
    top: 0;
}

Написано более трёх лет назад

Михаил @notiv-nt

Vl0d0, на jsfiddle выложите

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Frontend-разработчик: тариф PRO

10 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию + ИИ

6 месяцев

Далее

Решения вопроса 1

1 комментарий

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+2 ещё

Простой
Как блок уведомлений поднять выше dialog?
- 1 подписчик
- 16 часов назад
- 62 просмотра
1

ответ
CSS

Простой
Как добиться одинаковой ширины для определеных блоков в гриде?
- 1 подписчик
- 15 мая
- 102 просмотра
1

ответ
HTML

+1 ещё

Простой
Как свг заменить на фон?
- 1 подписчик
- 08 мая
- 231 просмотр
1

ответ
HTML

+1 ещё

Простой
Чем препроцессить в HTML сокращения?
- 2 подписчика
- 04 мая
- 309 просмотров
1

ответ
CSS

Простой
Filter: blur() размывает края при градиентном размытие?
- 1 подписчик
- 03 мая
- 126 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 2 подписчика
- 01 мая
- 343 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 738 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 696 просмотров
4

ответа
HTML

+1 ещё

Простой
Беда с input. Как избавиться от выделения заполненного поля?
- 2 подписчика
- 31 мар.
- 355 просмотров
1

ответ
HTML

Простой
Как сделать так, чтобы в браузерах код html не показывался в квадратиках?
- 4 подписчика
- 26 мар.
- 685 просмотров
3

ответа
Показать ещё Загружается…

HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Горизонтальное многоуровневое меню</title> <link rel="stylesheet" href="style.css" /> </head> <body> <ul id="menu-header" class="menu"> <li id="menu-item" class="menu-item"><a>Пункт 1</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item"><a href="#" aria-current="page">Пункт 1.2</a></li> </ul> </li> <li id="menu-item" class="menu-item"><a>Пункт 2</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item"><a>Пункт 2.1</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item"><a>Пункт 2.1.1</a></li> <li id="menu-item" class="menu-item"><a>Пункт 2.1.2</a></li> <li id="menu-item" class="menu-item"><a>Пункт 2.1.3</a></li> </ul> </li> <li id="menu-item" class="menu-item"><a href="#">Пункт 2.2</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item"><a>Пункт 2.2.1</a></li> <li id="menu-item" class="menu-item"><a>Пункт 2.2.2</a></li> <li id="menu-item" class="menu-item"><a>Пункт 2.2.3</a></li> </ul> </li> </ul> </li> </ul> </body> </html>

CSS
#menu-header { margin: 0; padding: 0; list-style: none; color: #5f727f; background: #fff; border: 1px solid #dfe5e8; width: 300px; } #menu-header a { display: block; width: 100%; padding: 10px; color: #5f727f; transition: 0.1s all; } #menu-header a:hover { color: #fff; background: #729fca; padding: 10px 0 10px 20px; border-left: 3px solid #4179ae; } .sub-menu > .sub-menu { color: red; } .sub-menu { margin: 0; padding: 0; list-style: none; color: #5f727f; background: #f4f6f7; border: 1px solid #dfe5e8; position: absolute; width: 300px; left: 300px; z-index: 1000; opacity: 0; top: -9999em; } .menu-item { position: relative; } .menu-item:hover .sub-menu { opacity: 1; top: 0; }

Answer 1 · 2020-01-29 02:44:30

Забыли вставить ">" в селектор

.menu-item:hover > .sub-menu {
    opacity: 1;
    top: 0;
}

И атрибут id должен быть уникальным

Answer 2 · 2020-01-29 02:50:09

Mak_Pet @Mak_Pet

https://jsfiddle.net/Mak_Pet/pawvsmb4/1/

www.cyberforum.ru/html/thread2272878.html — или так.

Ответ написан более трёх лет назад

Комментировать

Многоуровневое меню не работает, как пофиксить?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт