javascript - Timeout for mouseover and mouseout of drop down menu? -

i want make menu drop down http://www.huffingtonpost.com site. tried custom timeout mouseover , mouseout site can't. jquery:

var navtimers = []; $('.mcats > ul > li').each(function(){ $(this).hover(function(){         var $this = $( );         var id = jquery.data( );         navtimers[id] = settimeout( function() {             $this.addclass('hover');             navtimers[id] = "";           }, 250 );      }, function(){         var $this = $( );          var id = jquery.data( );         if ( navtimers[id] != "" )         {               cleartimeout( navtimers[id] );           }          else         {             navtimers[id] = settimeout( function() {                 if(!$this.is(':hover'))                 {                     $this.removeclass('hover');                     navtimers[id] = "";                 }             }, 600 );         }      }); }); 

here demo http://jsfiddle.net/rebeen/fskbl/

after submenu showing, using mouse on , out continuously on it. jquery not working me.

any idea help? thank much!

for menu can use css , html :

http://jsfiddle.net/dimitardanailov/m6jvd/

html :

<div id="menuh-container"> <div id="menuh">     <ul>         <li><a href="#" class="top_parent">item 1</a>         <ul>             <li><a href="#">sub 1:1</a></li>             <li><a href="#" class="parent">sub 1:2</a>                 <ul>                 <li><a href="#">sub 1:2:1</a></li>                 <li><a href="#">sub 1:2:2</a></li>                 <li><a href="#">sub 1:2:3</a></li>                 <li><a href="#">sub 1:2:4</a></li>                 </ul>             </li>             <li><a href="#">sub 1:3</a></li>             <li><a href="#" class="parent">sub 1:4</a>                 <ul>                 <li><a href="#">sub 1:4:1</a></li>                 <li><a href="#">sub 1:4:2</a></li>                 <li><a href="#">sub 1:4:3</a></li>                 <li><a href="#">sub 1:4:4</a></li>                 </ul>             </li>             <li><a href="#" class="parent">sub 1:5</a>                 <ul>                 <li><a href="#">sub 1:5:1</a></li>                 <li><a href="#">sub 1:5:2</a></li>                 <li><a href="#">sub 1:5:3</a></li>                 <li><a href="#">sub 1:5:</a></li>                 <li><a href="#">sub 1:5:5</a></li>                 </ul>             </li>         </ul>         </li>     </ul>      <ul>             <li><a href="#" >item 2</a></li>     </ul> </div>  <!-- end menuh-container div -->   </div>  <!-- end menuh div -->  

css :

#menuh-container     {     position: absolute;          top: 1em;     left: 1em;     }  #menuh     {     font-size: small;     font-family: arial, helvetica, sans-serif;     width:100%;     float:left;     margin:2em;     margin-top: 1em;     }  #menuh     {     text-align: center;     display:block;     border: 1px solid #0040ff;     white-space:nowrap;     margin:0;     padding: 0.3em;     }  #menuh a:link, #menuh a:visited, #menuh a:active    /* menu @ rest */     {     color: white;     background-color: #0040ff;      /* royal blue */     text-decoration:none;     }  #menuh a:hover                      /* menu on mouse-over  */     {     color: white;     background-color: #668cff;  /* cornflowerblue */     text-decoration:none;     }     #menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow top-parents */     {     background-image: url(http://sperling.com/examples/menuh/nav_white.gif);     background-position: right center;     background-repeat: no-repeat;     }  #menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow parents */     {     background-image: url(http://sperling.com/examples/menuh/nav_white.gif);     background-position: right center;     background-repeat: no-repeat;     }  #menuh ul     {     list-style:none;     margin:0;     padding:0;     float:left;     width:9em;  /* width of menu boxes */     /* note: adjustable menu boxes can comment out above width rule.     however, have add padding in "#menh a" rule menu boxes     have space on either side of text -- try */     }  #menuh li     {     position:relative;     min-height: 1px;        /* sophie dennis contribution ie7 */     vertical-align: bottom;     /* sophie dennis contribution ie7 */     }  #menuh ul ul     {     position:absolute;     z-index:500;     top:auto;     display:none;     padding: 1em;     margin:-1em 0 0 -1em;     }  #menuh ul ul ul     {     top:0;     left:100%;     }  div#menuh li:hover     {     cursor:pointer;     z-index:100;     }  div#menuh li:hover ul ul, div#menuh li li:hover ul ul, div#menuh li li li:hover ul ul, div#menuh li li li li:hover ul ul {display:none;}  div#menuh li:hover ul, div#menuh li li:hover ul, div#menuh li li li:hover ul, div#menuh li li li li:hover ul {display:block;}  /* end css drop down menu */ 

article