Как исправить эту строку меню, чтобы отобразить выпадающее подменю?

Question

Я использовал один из CSS-шаблонов, и в нем нет ни одного выпадающего меню, поэтому я добавил выпадающее меню. Проблема в том, что иногда я накладываю мышь на одну из вкладок/опций, в которой есть раскрывающееся меню (подменю), я не могу выбрать что-либо из этого раскрывающегося меню, потому что он быстро исчез, и я не знаю, почему это произошло ,

HTML-код для этого меню:

<div class="topnav"> 
       <ul class="menu" runat="server" > 
        <li><a href="Default.aspx">Home</a></li> 
        <li><a href="Services.aspx">Services</a> 
         <ul> 
          <li><a href="#">Service #1</a></li> 
          <li><a href="#">Service #2</a></li> 
          <li><a href="#">Service #3</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Items</a> 
         <ul>   
          <li><a href="#">Item #1</a></li> 
          <li><a href="#">Item #2</a></li> 
          <li><a href="#">Item #3</a></li> 
          <li><a href="#" target="_blank">Item #4</a></li> 
          <li><a href="#" target="_blank"">Item #5</a></li> 
          <li><a href="#" target="_blank">Item #6</a></li> 
          <li><a href="#">Item #1</a></li> 
         </ul> 
        </li> 

        <li><a href="#">About</a></li> 
        <li><a href="#">Contact Us</a></li> 
        <li><a href="#">Help</a></li> 

       </ul> 
       <div class="clr"></div> 
       </div> 

код CSS для этого меню является:

@charset "utf-8"; 
/* CSS Document */ 


ul.menu li ul { font-family:"Liberation sans", Arial, Helvetica, sans-serif;} 


/* DESIGN TOPNAV (mainmenu) */ 
.topnav { padding:0; margin:0; width:966px; height:53px; background: url(images/bg_menu.gif) top repeat-x; } 


/* level 0 */ 
.topnav ul { padding:0; margin:0 30px 0 0; list-style:none; border:0; float: left; } 
.topnav ul li { float:left; margin:0; padding:0; border-right:1px solid #303030; border-left:1px solid #0a0a0a; } 
.topnav ul li a { float:left; margin:0 1px 0 0; padding:17px 30px; color:#fff; font:normal 14px Georgia, "Times New Roman", Times, serif; text-decoration:none; } 
.topnav ul li.current_page_item { }     /* active item first level */ 
.topnav ul li.current_page_item a, 
.topnav ul li a.a_hover_main { color:#fff; background-color:#0f0f0f;}      /* on hover */ 


/* level 1 */ 
.topnav ul li ul { padding:0; top:52px; left:-2px; height:auto; color:#a8a7a7; background-color:#0f0f0f; border-bottom:none;}   /* position of submenu */ 
.topnav ul li ul li { margin:0; padding:0; background:none; border-bottom:1px solid #010101;} 

/* for the next line: (.topnav ul li ul li a) 
* I changed: 
* padding: 10px 24px and width: 49px 
* and I added: margin:0 1px 0 0 
*/ 
.topnav ul li ul li a { float:left; margin:0 1px 0 0; padding:17px 47px; width:54px; font:normal 12px Georgia, "Times New Roman", Times, serif; color:#7f7f7f;} 
.topnav ul li ul li a.have_submenu { }                /* if item have submenu */ 
.topnav ul li ul li a:hover, 
.topnav ul li ul li a.have_submenu_hover { color:#fff; background:none;} 
.topnav ul li ul li ul { padding:0; top:-1px; left:170px;} /* position of submenu level 2 */ 

.topnav * { z-index:1001;} 

/* DO NOT EDIT!!! */ 
ul.menu { list-style:none;} 
ul.menu li { cursor:pointer; position:relative;} 
ul.menu li a { position:relative;} 
ul.menu li ul { display:none; position:absolute; list-style:none;} 
ul.menu li ul li ul { position:absolute; list-style:none;} 

JQuery код:

jQuery(document).ready(function($){ 

    // menu smothness 
    $('.menu li').click(function() { 
     window.location = $(this).find('a:first').attr('href'); 
    }); 
    var dropdown_level = 0; 
    $('.menu li ul').parent().find('a:first').addClass('have_submenu'); 
    $('.menu').children('li').children('a').addClass('top_level'); 
    $('.menu').children('li').children('a').removeClass('have_submenu'); 
    $('.menu li').hover(function(){ 
     if(dropdown_level == 0){ 
     $('.menu').find('a').removeClass('have_submenu_hover'); 
     $(this).addClass('li_hover_main'); 
     $(this).children('a').addClass('a_hover_main'); 
     $('.menu ul').parent().find('a:first').addClass('have_submenu'); 
     $('.menu').children('li').children('a').addClass('top_level'); 
     $('.menu').children('li').children('a').removeClass('have_submenu'); 
     } 
     $(this).find('ul:first').stop(true,true).slideDown(200).show(); 
     $(this).find('a:first').addClass('have_submenu_hover'); 
     $('.menu').children('li').children('a').removeClass('have_submenu_hover'); 
     dropdown_level++; 
    },function(){ 
     $(this).find('ul:first').stop(true,true).slideUp(0); 
     $(this).find('a:first').removeClass('have_submenu_hover'); 
     dropdown_level--; 
     if(dropdown_level == 0){ 
     $(this).removeClass('li_hover_main'); 
     $(this).children('a').removeClass('a_hover_main'); 
     } 
    }); 
    // END of menu smothness 

}); 

Вот снимок для строки меню что у меня есть:

Answer 1

Я использовал сценарий hoverIntent, чтобы исправить этот эффект. Вы буквально оставляете один якорь, поэтому наведите указатель мыши, когда вы выходите. Способ исправить это - отложить эффект наведения, чтобы он оставался достаточно длинным, чтобы пользователи могли навести курсор мыши.

http://cherne.net/brian/resources/jquery.hoverIntent.html

Тогда что-то вроде

$('.main-nav > ul > li').hoverIntent({ 
     timeout: 300, 
     over: function() { 
      $(this).addClass('hover') 
     }, 
     timeout: 300, 
     out: function() { 
      $(this).removeClass('hover') 
     } 
    });