CSS li:鼠标悬停工作，但我想让它也可以点击

Question

查看www.sadrobotdevelopment.com，了解我正在讨论的内容(最好用chrome查看)

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

这是使菜单弹出的CSS，我想弄清楚如何使它也可点击。这主要是因为平板电脑和智能手机没有悬停功能。CSS中有没有什么东西可以处理这个问题，或者我需要考虑让我的网站针对移动浏览进行优化？

Answer 1

如果在子UL之前有一个链接，您可以将:focus和:active伪类用于链接，并结合相邻兄弟组合器：

#menu LI > A:focus  + UL,
#menu LI > A:active + UL {
    opacity: 1;
    /*...*/
}

Answer 2

纯CSS无法实现点击事件。你可以挂起一个javascript点击处理程序来添加一个"active“类到你的元素中，并让CSS另外使用它。