0

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

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

4

1 回答 1

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;
}
于 2013-06-27T11:21:49.113 回答