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

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

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

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

1 个答案: