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

【问题标题】：Menu item hover effects and sublist hovering菜单项悬停效果和子列表悬停
【发布时间】：2013-06-24 17:20:09
【问题描述】：

我对菜单项悬停效果有疑问。

首先，我在这里有四张图片： 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 缺少一些背景样式，不过没关系。

【问题讨论】：

看起来您的子菜单是菜单的子菜单。你能提供一个jsfiddle吗？
检查此链接.. jqueryui.com/tabs/#vertical
我会看看链接，似乎很有帮助。忘了补充，是wordpress网站，这个菜单是由wordpress菜单生成和管理的。
这里是jsfiddle：jsfiddle.net/TBRgu 缺少一些背景样式，不过没关系。

标签： jquery list menu hover

【解决方案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;
}

【讨论】：