Почему мой выпадающий список CSS неадекватно работает в Firefox?

Question

[Extramezz]

И вновь доброго дня.
Вот имеется такая штука: jsfiddle.net/raugxecd/7

Она обернута в button - потому что :focus есть только у button, input,select и a и т.п и из этой кучи для данной задачи подходит только button..

Откройте фидл в Chrome - при наведении на пункты списка - они изменяются (:hover работает), откройте то же самое в Firefox - на передний план выходит родительский блок. Как поправить?

(Если использовать не button а div - все прекрасно, но вот, понимаете, нужен :focus)...

Answer 1

[Денис Инешин]

Вы можете и DIV-у придать возможность получать фокус. Добавьте ему tabindex="-1"

Comments

[Extramezz]

Класс, а не подскажите, как бы мне при "повторном фокусе" скрывать список? :)

[Денис Инешин]

Extramezz: это уже JS) только он умеет в Toggle.

[Александр Зонов]

Extramezz: вообще есть такая возможность, посмотри вот это jsfiddle.net/amazonov/94km0arL/10 Обрати внимание на двойную вложенность меню. Фокус на .wrapper открываем меню, на фокус на .holder скрывает его.

[Александр Зонов]

Extramezz: Также обрати внимание на использование свойства pointer-events

[Extramezz]

Александр Зонов: Класс, а pointer-events с какой версии CSS и IE будет работать? На него просто справки на WebRef нету :\

[Александр Зонов]

Extramezz: тут есть засада, все очень плохо в IE (caniuse.com/#search=pointer-events), а также на айпаде пример тоже не отработал, хотя там подозреваю проблему в фокусом на див, а не с pointer-events.