Как реализовать многоуровневое выпадающее меню CSS с разными классами?

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

Я пытаюсь реализовать многоуровневое выпадающее меню навигации только в CSS, но есть одна небольшая часть, которую я просто не могу заставить работать правильно.

Что должно произойти:

1) При наведении курсора мыши на пункт меню он должен быть выделен с помощью другого изображения (это работает нормально). 2) При наведении курсора мыши на пункт подменю родительский пункт меню должен быть выделен.

Пункт 2 работает нормально до тех пор, пока у меня не появится class .bottom в родительском пункте меню (этот класс используется, поскольку изображение немного отличается). Если родительский элемент меню имеет class .bottom , выделение просто не происходит.

Демонстрацию этого можно посмотреть здесь: http://jsfiddle.net/cZFtW/2 /

Демонстрация показывает, что при наведении курсора мыши на меню 1> Подменю 3> Подменю X подменю 3 выделяется. Однако при наведении курсора мыши на меню 2> Подменю 3> Подменю X подсветка отсутствует.

Кто-нибудь может увидеть, чего мне не хватает? С другой стороны, нет никакой реальной причины не использовать здесь Javascript, я бы просто предпочел, чтобы все это обрабатывалось CSS, если это возможно (требуется только поддержка IE7 ).

Комментарии:

1. Заставьте это работать на скрипке, и тогда я гарантирую, что люди потратят время, чтобы найти вам решение. Это поможет вам начать, вам просто нужно исправить ссылки для изображений — jsfiddle.net/cZFtW/1

2. Спасибо — я обновил скрипку со ссылками на изображения.

Ответ №1:

TL; DR; версия: эта скрипка показывает ответ.


Я понимаю, что вы имеете в виду. И я почти уверен, что стиль, на который вам нужен ответ, который работает для всех, кроме того, который внизу, возник чисто случайно. (Должен сказать, довольно приятный). Я почти уверен в этом, потому что ваш код, а также имена файлов не имеют какой-либо согласованности. Есть двойной код, есть лишний код и отсутствуют изображения.

Поэтому я переписал вашу разметку и таблицу стилей и пришел к скрипке, как упоминалось выше.

Теперь, как это работает?

Хитрость заключается в том, чтобы прикрепить фоновое изображение к элементу внутри элемента списка. В этом случае я выбрал для элемента привязки, поскольку это наиболее вероятно. Первый шаг — изменить фоновое изображение при наведении курсора, это основное.

Второй шаг — снова изменить фон при наведении курсора мыши на подменю. В этот момент элемент привязки больше не зависает, но элемент списка есть. Таким образом, вы все равно можете изменить фон элемента привязки.

Примечание: в моем решении есть небольшая разница с тем, что вы хотите: при наведении курсора на стрелку фон, если элемент списка уже изменен, а не до тех пор, пока курсор не окажется над подменю. Если вы хотите предотвратить это, вам нужно добавить дополнительный элемент для каждого подменю, как вы сделали сами. Но я думаю, что это тоже довольно приятно.

Комментарии:

1. Спасибо за это, это отлично работает! Код на самом деле не был моим, я просто получил его от моего дизайнера с предположением, что я буду использовать Javascript, чтобы заставить его работать, но не чувствовал, что это необходимо, и теперь вы доказали, что это не так. Спасибо.