Question

我的菜单项悬停效果有问题。

首先，我有四张图片： http://www.upload.ee/image/3408064/abi.png

这是wordpress网站，此菜单由wordpress菜单生成和管理。

在第一张图片中，您可以在左侧看到菜单。灰色大写项目是主要项目，点击它们会显示蓝色文本和白色背景的子列表。

悬停子列表项将像第二个图像一样（出现另一个子列表）

这是有问题的部分。当我将光标移动到出现子列表时，父项悬停效果消失，就像在第三张图像中一样。

当我移动到子列表时，我希望父级悬停效果保持不变。就像上一张图片一样......

这是我当前的子列表在脚本父子列表项目上出现的脚本：

jQuery(function () {
    jQuery('.left-sidebar li li').hover(function () {
        jQuery(this).children('ul').slideDown(1);
    }, function () {
        jQuery(this).children('ul').fadeOut(1);
    });
});

这是第一个子菜单外观的主要项目点击动作脚本：

jQuery(function () {
    jQuery('.left-sidebar li').click(function () {
        jQuery(this).children('ul').slideDown(300);
    }
});

这是jsfiddle：jsfiddle.net/TBRgu缺少一些背景样式，但没关系。

Answer 1

现场演示：http://jsfiddle.net/TBRgu/2/

改变这个：

.left-sidebar .box  li li a:hover

对此：

.left-sidebar #menu-kutsemeistrivoistlused > li > ul > li:hover > a

更改宽度如下：

.left-sidebar .box  li li li a{
    background: none;
    padding-left: 4px;
    width: 186px; /* changed from 165px */
    border:0;
}

菜单项悬停效果和子列表悬停

1 个答案: