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

Question

Vl0d0 @Vl0d0

HTML
CSS

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

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

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

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 выложите

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

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

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

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

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

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

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

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

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

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 2 часа назад
- 19 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 13 часов назад
- 76 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 71 просмотр
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 31 просмотр
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 101 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 93 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 88 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

10000 руб./за проект

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 — или так.

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

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

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

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

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

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