ドロップダウン・ディビジョンの使い勝手を向上させるために、表示/非表示を切り替える

Question

hoverintentプラグインのjqueryの表示と非表示機能を切り替えようとしています。私は2つの理由からこれをやりたいと思っています.1番目は、サブアイテムがポップアップする前にマウスがメニュー項目の上にどれくらいの長さにあるかを制御でき、2番はビルドから複数のインスタンスを停止します。私は昨晩からコードを変更しようとしていますが、これはうまく機能しません...私の元のjqueryとhtmlは、どんな助けでも大歓迎です。皆さんありがとう！！！

ドロップダウンメニューを使用してWebサイト

http://www.nestudiosonline.com/test.php

のjQuery

$(document).ready(function() { 
    // shows the hidden div in the list 
    $('#dave').mouseover(function() { 
     $('#aboutdke').show('200'); 

    }); 
    // hides the hide the div again for that list item 
    $('#dave').mouseleave(function() { 
     $('#aboutdke').hide(); 

    }); }); 

HTML

<ul id="menu"> 
     <li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li> 
     <li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content </div></li> 
     <li class="megamenu"><a class="links" href="#">ALUMNI</a></li> 
     <li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li> 
     <li class="megamenu"><a class="links" href="#">EVENTS</a></li> 
     <li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li> 
     <li class="megamenu"><a class="links" href="#">SHOP DKE</a></li> 
     </ul> 

Answer 1

私はイェーイ...これを行うための最も簡単なjQueryのソリューションであり、それをやりましたhoverintentプラグインとの基本的なドロップdiv、私のHTMLは変更する必要はなかったまったく、病気

ul#menu 
{ 
    display:block; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

ul# menu li 
{ 
    display:inline; 
    position: relative; 
    } 

ul#menu div { 
    display: none; 
} 

ul#menu li.mega div { 
    position: absolute; 
} 

ul#menu li.hovering div { 
    display: block; 
} 

#aboutdke 
{ 
    display:block; 
    color:#FFF; 
    text-align:left; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:10px; 
    background-color:#000; 
    margin:0; 
    padding-top:10px; 
    padding-right:10px; 
    padding-bottom:10px; 
    padding-left:10px; 
    border:0px; 
    width:910px; 
    height:280px; 
    float:left; 
    position:absolute; 
    z-index:99999; 
    top:164px; 
    left:140px; 
} 


a.links:link 
{ 
    display:block; 
    width:120px; 
    height:22px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:none; 
    text-align:center; 
    outline:none; 
    float:left; 
} 

a.links:visited 
    { 
    display:block; 
    width:120px; 
    height:22px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:none; 
    text-align:center; 
    outline:none; 
    float:left; 
    } 

/* mouse over link */ 

a.links:hover 
    { 
    display:block; 
    width:120px; 
    height:22px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:underline; 
    text-align:center; 
    outline:none; 
    background-color:#000; 
    float:left; 
    } 

/* selected link */ 

a.links:active 
    { 
    display:block; 
    width:120px; 
    height:22px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:underline; 
    text-align:center; 
    outline:none; 
    background-color:#000; 
    float:left; 
    } 

a.dkeorg:link 
{ 
    display:block; 
    width:120px; 
    height:23px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:none; 
    text-align:center; 
    outline:none; 
    float:left; 
} 

a.dkeorg:visited 
    { 
    display:block; 
    width:120px; 
    height:23px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:none; 
    text-align:center; 
    outline:none; 
    } 

/* mouse over link */ 

a.dkeorg:hover 
    { 
    display:block; 
    width:120px; 
    height:23px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:underline; 
    text-align:center; 
    outline:none; 
    float:left; 
    } 

/* selected link */ 

a.dkeorg:active 
    { 
    display:block; 
    width:120px; 
    height:23px; 
    padding-top:8px; 
    padding-left:3px; 
    padding-bottom:0px; 
    color:#FFF; 
    text-decoration:underline; 
    text-align:center; 
    outline:none; 
    float:left; 
    } 

<script type="text/javascript" charset="utf-8"> 
//<![CDATA[ 
    $(document).ready(function() { 
//add hovering class to li's inside of the unordermened with the id menu  
     function addMega(){ 
     $(this).addClass("hovering"); 
     } 
//remove hovering class to li's inside of the unordermened with the id menu 
     function removeMega(){ 
     $(this).removeClass("hovering"); 
     } 
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time 
    var megaConfig = { 
     interval: 300, 
     sensitivity: 4, 
     over: addMega, 
     timeout: 200, 
     out: removeMega 
    }; 
//make list items with the class megamenu have the hoverinter plugin excuted on them 
    $("li.megamenu").hoverIntent(megaConfig) 


    }); 


    //]]> 
    </script> 

CSSを観察し....あまりにも私のCSSを表示