悬停后保持子菜单活动状态

Question

我很好奇如何在链接悬停后保持子菜单处于活动状态？我的意思是，即使您将鼠标移动到其他地方，它也会保持活动状态，因此总是回到那里并悬停不会很烦人。

这是导航菜单的示例： --删除了它，因为它是固定的--

我很确定我必须使用 jQuery 来实现这一点？不过，我对jQuery不是很有经验。或者它实际上也可以用纯 css 和 html 实现吗？

这是我的导航CSS代码：

nav {
    width: 1000px;
    height: 45px;
    margin-bottom: 45px;
    float: left;
    border-radius: 2px;
    line-height: normal;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    position: relative; }
    nav ul li {
        height: 19px;
        padding: 13px 10px;
        color: #0f41a4;
        float: left;
        text-decoration: none; }
        nav ul li:hover ul { display: block; }

        nav ul li ul:hover { display: block; }
        nav ul li ul {
            width: 999px;
            display: none;
            position: absolute;
            margin-top: 13px;
            background: #F6F6F6;
            background: rgba(250, 250, 250, .5);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 1px solid #FAFAFA;
            border-bottom: 1px solid #ccc;
            z-index: 9999;
            left: 0px;
            float: left; }
            nav ul li ul li {
                padding: 8px 10px;
                float: left; }
        nav ul li:hover {
            text-decoration: underline;
            background: rgba(0, 0, 0, .03); }

Answer 1

如果您只想让子菜单始终处于活动状态，那么为什么要将它们设置为显示 none 并在悬停时显示。这里需要javascript/jquery。

$(".page-item").click(function() {
   $(this).children().find(".children").show();
});