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

Question

Ситуация

Я хочу создать <div>, который запускает другой <div> выполнить visibility:visible из прячась на :hover. Я сделал это, используя этот CSS код:

#MAIN_NAVIGATION { /* Styling goes here */ } 

#NAVIGATION_POP_DROP { 
visibility: hidden;} 

#MAIN_NAVIGATION:hover > #NAVIGATION_POP_DROP { 
visibility: visible;} 

#MAIN_NAVIGATION:hover { /* Changes original styling to change BG color */} 

#MAIN_NAVIGATION является ДИВ идентификатор, который используется для DIV, который принимает парение. #NAVIGATION_POP_DROP является DIV, которое отображается при наведении мыши на #MAIN_NAVIGATION

Проблема

CSS-выше работы с использованием настольных/портативных компьютеров. Я искал решение для «зависания» для работы с сенсорными устройствами. Проблема в том, что когда я нажимаю на #MAIN_NAVIGATION, #NAVIGATION_POP_DROP не закрывается, даже если я нажимаю на другой элемент. Единственное действие, которое вызывает исчезновение #NAVIGATION_POP_DROP, - это когда я нажимаю на другой div, содержащий #MAIN_NAVIGATION id.

Вопрос

на сенсорных устройствах, как я могу скрыть #NAVIGATION_POP_DROP Див снова: (1), нажав на другой элемент, (2) прокрутка экрана, или (3), нажав на то же #MAIN_NAVIGATION div?

Примечание: Элемент #MAIN_NAVIGATION div не имеет ссылки.

Эффект, который я хочу, похож на меню Mashable.

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

Answer 1

Я бы рекомендовал использовать псевдо-селектор: после того, как, например, так:

#MAIN_NAVIGATION:hover:after { 
visibility: visible; content:'the content of your new div'; /* add any style here*/} 

Смотрите мой пример работает:

http://jsfiddle.net/wNrdp/