如何创建一个下拉另一个DIV在DIV：使用CSS悬停（桌面）和自来水（为触摸设备）？(How do

现状

我想创建一个<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的DIV ID。 #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）在同一攻：用DIV再次#MAIN_NAVIGATION DIV？

注： #MAIN_NAVIGATION div元素不承担的链接。

我想要的效果是相似的菜单混搭 。

我希望有人能帮助我。 我在使用CSS新的，我没有太多的知识，在触摸设备的设计。 谢谢。

Answer 1:

我会建议使用伪选择：之后，就像这样：

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

见我的例子中工作：

http://jsfiddle.net/wNrdp/

文章来源: How do I create a DIV that drops down another DIV on :hover (for desktop) and on tap (for touch devices) using CSS?