2012-02-06 60 views
-1

我在網站上工作,遇到菜單問題。當我將鼠標懸停在菜單上時,其子菜單不會顯示。所以請幫助我解決這個問題。如何解決菜單懸停的問題

enter image description here

Full size image

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

所有的時間,我必須單擊該導航看看它的子IM -菜單。 PLZ PLZ PLZ幫助我解決這個問題。

謝謝。

+3

哪個菜單?您可以只發布相關部分,而不是鏈接到相關頁面。 – karim79 2012-02-06 16:08:26

+0

請看看我上傳的圖片,我想要什麼。 – Muzammil 2012-02-06 16:17:54

+0

這裏沒有任何子菜單出現,請點擊或以其他方式。你真的不希望人們閱讀那種微小的類型嗎? – Scott 2012-02-06 16:18:29

回答

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> 
+0

好,如果我只是刪除他們中的任何人。我的所有風格都會消失。你能幫我嗎?我如何保持同樣的風格和懸停? – Muzammil 2012-02-06 16:21:50

+0

請幫我理清我該如何解決這個問題 – Muzammil 2012-02-06 16:26:31

+0

@Muzammil刪除該JS塊,並使用suckerfish提供的類並使用CSS來設置菜單樣式。從我可以告訴你使用javascript來設計菜單的樣式,當你可以用簡單的CSS輕鬆地設計它時。 Suckerfish提供了一個hoverClass,您可以使用它來設置菜單項上的懸停事件樣式(添加傾斜圖像)。 'hoverClass:'sfHover'' – 2012-02-06 16:27:52