WordPress的菜單項懸停

Question

我想創建一個自定義的下拉菜單。

我的代碼如下所示：

<div id="header"> </div> 

     <div class="layer1_col"> 
     <?php wdg::displayMenu('main'); ?> 
     </div> 

     <div class="programmingTable"></div> 
     <div id="main"> 

的WDG :: displayMenu（ '主​​'）;生成在wordpress後臺創建的名爲「main」的菜單，顯然。 theres沒有改變wdg，因爲我需要使用它。

而我試圖編輯菜單項12，當我編輯在鉻網站這是如何建立菜單（這就是我如何到菜單項12）。

<ul id="menu-main" class=""><li id="menu-item-96" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-96"><a href="http://jouwfm.100200.nl/">NIEUWS</a></li> 
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://jouwfm.100200.nl/archief/">ARCHIEF</a></li> 
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a>PROGRAMMERING</a></li> 
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://jouwfm.100200.nl/vacatures/">VACATURES</a></li> 
<li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://jouwfm.100200.nl/adverteren/">ADVERTEREN</a></li> 
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://jouwfm.100200.nl/contact/">CONTACT</a></li> 
</ul> 

而菜單項目12不是真正的菜單項目。它沒有連接到它的鏈接，div（.programmingTable）將被填充所有不同的帖子，但是這不包括問題）。

我的CSS是這樣的：

.programmingTable{ 
    display:none; 
    margin-left: 10px; 
    margin-right: 10px; 
    padding: 0; 
    height: 380px; 
    line-height: 1.5em; 
    background-color: #e3e3e3; 
    position: absolute; 
    z-index: 5; 
    width: 934px; 
    top: 87px; 
    padding-left: 8px; 
    padding-right: 8px; 
    padding-top: 45px; 
    border-bottom-left-radius: 8px; 
    -moz-border-bottom-left-radius: 8px; 
    border-bottom-right-radius: 8px; 
    -moz-border-bottom-right-radius: 8px; 
    -webkit-box-shadow: 0 7px 9px rgba(50,50,50,0.41); 
    -moz-box-shadow: 0 7px 9px rgba(50,50,50,0.41); 
    box-shadow: 0 7px 9px rgba(50,50,50,0.41); 
    background: -webkit-gradient(linear,0% 0,0% 90%,from(#d9d9d9),to(#fbfbfb)); 
    background: -webkit-linear-gradient(top,#d9d9d9,#fbfbfb); 
    background: -moz-linear-gradient(top,#d9d9d9,#fbfbfb); 
    background: -ms-linear-gradient(top,#d9d9d9,#fbfbfb); 
    background: -o-linear-gradient(top,#d9d9d9,#fbfbfb); 
} 

#menu-item-12:hover .programmingTable{ 
    display:block; 
} 

使用不透明，z-index的也試過。 z-index可以工作，但其餘的div不是相同的顏色。它看起來不正確。

我已經嘗試過使用jQuery來做到這一點使用此：

jQuery('#menu-item-12').mouseover(

    jQuery(document).ready(function() { 
     jQuery('.programmingTable').fadeIn(200) 
    }) 
); 
    jQuery('#menu-item-12').mouseleave(

    jQuery(document).ready(function() { 
     jQuery('.programmingTable').fadeOut(200) 
    }) 
); 

這是行不通的。好吧，我想是。它使項目淡入淡出，然後再次淡出，一次在頁面加載。懸停在有問題的div上時，它什麼也不做。

我一直在這個問題卡住了幾天，現在任何幫助將不勝感激。

關於我的意思的更好的例子是this site懸停在「程序員」上。

編輯：這裏的類上displayMenu

static public function displayMenu($name, $atts=array()) 
{ 
    // Getting/Setting the variablen 
    extract(shortcode_atts(array('container'  => 'div', 
            'containerid' => '', 
            'containerclass' => '', 
            'menuid'   => '', 
            'menuclass'  => '', 
            'afterlabel'  => '', 
            'beforelabel' => '', 
           ), $atts 
     )); 

    wp_nav_menu(array('menu'   => $name, 
         'menu_id'   => $menuid, 
         'menu_class'  => $menuclass, 
         'link_before'  => $beforelabel, 
         'link_after'  => $afterlabel, 
         'container'  => $container, 
         'container_id' => $containerid, 
         'container_class' => $containerclass, 
        )); 
} 

Answer 1

我敢肯定你的jQuery代碼可以工作。

它是否在.ready事件中被調用？

此外，我會使用.mouseenter事件。

jQuery(document).ready(function() { 
    jQuery('#menu-item-12').mouseenter(function() { 
     doSomething(); 
    }).mouseleave(function() { 
     doSomethingElse(); 
    }); 
})