Html 如何创建一个DIV，使用CSS将另一个DIV拖放到：hover（用于桌面）和on-tap（用于触摸设备）？

形势

我想创建一个

，它触发另一个

执行

可见性：可见
，使其不被隐藏在
：悬停
。我使用以下CSS代码完成了此操作：

#主导航{/*样式设置在此处*/}
#导航(弹出)(下降){
可见性：隐藏；}
#主导航：悬停>#导航(弹出)下拉{
可见性：可见；}
#主导航：悬停{/*更改原始样式以更改背景颜色*/}

#MAIN_NAVIGATION
是用于接受悬停的div的div id。
#NAVIGATION\u POP\u DROP
是鼠标悬停在
#MAIN\u NAVIGATION

问题

上面的CSS使用台式机/笔记本电脑工作。我已经为“悬停”在触摸设备上的工作寻找了一个解决方案。问题是，当我点击
#MAIN_NAVIGATION
时，即使我点击另一个元素，
#NAVIGATION_POP_DROP
也不会关闭。触发
#NAVIGATION#POP_DROP
消失的唯一动作是我点击另一个带有
#MAIN#NAVIGATION
id的div

问题

在触摸设备上，如何通过以下方式再次隐藏
#导航\u POP\u下拉列表
div：
（1） 利用另一个因素，
（2） 滚动屏幕，或
（3） 点击相同的
#主导航
div

注意：
#MAIN_导航
div元素没有链接

我想要的效果类似于的菜单

我希望有人能帮助我。我是CSS新手，在触摸设备的设计方面我没有太多的知识。谢谢。
我建议使用伪选择器：after，like so:

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

请参见我的工作示例：

http://jsfiddle.net/wNrdp/

通常情况下，移动设备上的
：hover
变为
：active
，触摸设备上的桌面悬停事件对于界面元素来说不是很好，因为它们不可靠且难以预测（因为触摸没有真实的悬停动作）。你会对jQuery解决方案感到满意吗？你说，这只是我学到的东西“…另一个div带有
#MAIN_NAVIGATION
id。我怀疑这与您的问题有关，但id应该是唯一的。如果您需要为两个元素提供相同的样式，请改用类。这里有一些不错的JS解决方案：@ErikMes我尝试用
：active
替换
：hover
，但它在我的iPad上仍然不起作用。