html - 菜单里一个:active how can I make it working properly?

Question

我正在做一个导航栏，我希望当用户按下“showreel”时，其他两个部分出现。我如何使用 CSS 做到这一点？

这是我的代码:

<li><a href="showreel.html">showreel</a>
    <ul>
     <li><a href="showreel.html">director</a></li>
    <li><a href="showreel.html">cinematographer</a></li>
    </ul>

Answer 1

正如其他人提到的，您可能希望使用 :hover 作为悬停菜单。请注意，仅使用键盘无法访问典型的悬停菜单，并且需要付出额外的努力才能使它们在键盘上工作。您需要 Hook 焦点事件才能执行此操作:

Demo

CSS

ul li:hover ul,

ul li.forceShow ul
{
    display:block;
}

ul ul {
    display:none;
}

JS

$('ul a').focusin(function () {
    $(this).parent().toggleClass('forceShow');
});