#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, чтобы заставить его работать, но не чувствовал, что это необходимо, и теперь вы доказали, что это не так. Спасибо.