Навигация с закругленными углами

Question

Я работал над следующим выпадающим меню, видимым здесь .

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

Любое предложение, когда раскрывающийся список активен ипользователь перемещается по такому, чтобы текст (активное изображение) оставался черным?

Answer 1

В идеале вы должны использовать текст, а не изображения для пунктов меню. Тогда вы могли бы очень легко использовать CSS для управления цветами текста при наведении курсора на <li> без необходимости использования JavaScript вообще.

То, как вы делаете это сейчас (с изображениями), я считаю, что это все еще возможно, переместив ваши onmouseover и onmouseout с <a> на <li> над ним. Для этого может потребоваться некоторая доработка сценариев, но, надеюсь, вы получите концепцию: обнаруживать зависание над всем элементом списка (и его содержимым), а не только над тегом привязки в этом элементе списка.

Answer 2

Вы можете использовать CSS ot JS, чтобы изменить цвет заголовка, когда мышь наводит курсор на

, который содержит заголовок, а не когда он наводит курсор на сам заголовок.

Answer 3

Как насчет размещения элемента меню вместе с его раскрывающимся списком в контейнере (возможно, div), который расширяется и включает раскрывающееся меню, а затем использует CSS-селектор, включающий: hover в этом контейнере, который детализирует текст элемента,Пока они все еще находятся в меню или в его раскрывающемся меню, оно все равно должно быть закрыто при наведении курсора.