如何解决菜单悬停问题

Question

我在一个网站上工作，但其菜单遇到了问题。当我将鼠标悬停在菜单上时，其子菜单不会出现。所以请帮我解决这个问题。

全尺寸图片

http://www.mulberrydesignerkitchens.com/

我一直使用一段代码来实现 jQuery 菜单，

var $jnav = jQuery.noConflict();
$jnav(document).ready(function () {
    $jnav('#menu-mainnav li').hover(

    function () {
        $jnav(this).css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-current-bg.png') no-repeat", 'cursor', "pointer");
        if ($jnav(this).is('#menu-mainnav li:last-child')) {
            $jnav('#menu-mainnav li:last-child').css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-last-bg.png') no-repeat");
        } else if ($jnav(this).is('.sub-menu li:last-child')) {
            $jnav('.sub-menu li:last-child').css('background', "none scroll #8e4d69");
        }
    }, function () {
        if (!$jnav(this).hasClass('current-menu-item')) {
            $jnav(this).css('background', "none");
        }
        if (!$jnav('#menu-mainnav li:first').hasClass('current-menu-item')) {
            $jnav('#menu-mainnav li:first').css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-first-bg.png') no-repeat");
        }
    })
    $jnav('#menu-mainnav li ul li').hover(

    function () {
        $jnav(this).css('background-color', "#8e4d69", 'cursor', "pointer");
    }, function () {
        if (!$jnav(this).hasClass('current-menu-item')) {
            $jnav(this).css('background', "#833b5d");
        }
    })
    if (!$jnav('.superfish li:first').hasClass('current-menu-item')) $jnav('.superfish li:first').css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-first-bg.png') no-repeat");
    $jnav('.superfish li.current-menu-item:last-child').css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-last-bg.png') no-repeat");
    if (!$jnav('.sub-menu li:first').hasClass('current-menu-item')) $jnav('.sub-menu li:first').css('background', "#833b5d");
    $jnav('.sub-menu li.current-menu-item:last-child').css('background', "#833b5d");

    $jnav('ul.superfish').superfish();
});

我必须单击导航才能看到它的子菜单。请帮我解决这个问题。

谢谢。

Answer 1

您有两个菜单脚本相互争夺菜单的悬停事件（Suckerfish 和 jNav），删除其中之一，您的菜单应该得到修复。

var $jnav = jQuery.noConflict();
$jnav(document).ready(function () {
    $jnav('#menu-mainnav li').hover(

    function () {
        $jnav(this).css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-current-bg.png') no-repeat", 'cursor', "pointer");
        if ($jnav(this).is('#menu-mainnav li:last-child')) {
            $jnav('#menu-mainnav li:last-child').css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-last-bg.png') no-repeat");
        } else if ($jnav(this).is('.sub-menu li:last-child')) {
            $jnav('.sub-menu li:last-child').css('background', "none scroll #8e4d69");
        }
    }, function () {
        if (!$jnav(this).hasClass('current-menu-item')) {
            $jnav(this).css('background', "none");
        }
        if (!$jnav('#menu-mainnav li:first').hasClass('current-menu-item')) {
            $jnav('#menu-mainnav li:first').css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-first-bg.png') no-repeat");
        }
    })
    $jnav('#menu-mainnav li ul li').hover(

    function () {
        $jnav(this).css('background-color', "#8e4d69", 'cursor', "pointer");
    }, function () {
        if (!$jnav(this).hasClass('current-menu-item')) {
            $jnav(this).css('background', "#833b5d");
        }
    })
    if (!$jnav('.superfish li:first').hasClass('current-menu-item')) $jnav('.superfish li:first').css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-first-bg.png') no-repeat");
    $jnav('.superfish li.current-menu-item:last-child').css('background', "url('http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/nav-last-bg.png') no-repeat");
    if (!$jnav('.sub-menu li:first').hasClass('current-menu-item')) $jnav('.sub-menu li:first').css('background', "#833b5d");
    $jnav('.sub-menu li.current-menu-item:last-child').css('background', "#833b5d");
    jQuery('.lightbox').lightBox({
        imageLoading: 'http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/lightbox-ico-loading.gif',
        imageBtnClose: 'http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/lightbox-btn-close.gif',
        imageBtnPrev: 'http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/lightbox-btn-prev.gif',
        imageBtnNext: 'http://www.mulberrydesignerkitchens.com/wp-content/themes/MBK/images/lightbox-btn-next.gif'
    });
    $jnav('#logo').hover(function () {
        $jnav(this).css('opacity', '0.8');
    }, function () {
        $jnav(this).css('opacity', '1');
    });
    $jnav('#homepage-images h4').css('display', 'none');
    $jnav('ul.superfish').superfish({
        hoverClass: 'nav#primary-menu a'
    });
});

要让吸盘鱼发挥作用，您需要做的是：

<script> 

    $(document).ready(function() { 
        $('ul.sf-menu').superfish(); 
    }); 

</script>