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

Question

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

起初，我这里有四象： http://www.upload.ee/image/3408064/abi.png

这是WordPress站点并生成该菜单由WordPress的菜单管理。

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

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

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

当我移动到子列表时，我想让父项悬停效果留下来。 像去年的图片

这里是我的子表apperaing当前脚本盘旋而父子列表项：

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

这里是第一子appearence主要项目点击动作脚本：

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; 
}