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

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:jsfidde.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;
}