jquery延遲滑動切換並沒有滑動？

即時通訊我正在取得進展，我認爲，我的菜單的第二級別有一個小的停頓，然後它滑下來，我不明白爲什麼也沒有上拉我認爲這會發生切換這裏是我的代碼更好格式我希望jquery延遲滑動切換並沒有滑動？

首先，HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="jquery-1.7.2.js" type="text/javascript"></script> 
</head> 
<body> 
<div id="nav"> 
<ul class="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Surf Boards</a> 
     <ul class="subnav"> 
      <li ><a href="#">Long Boards</a> 
       <ul class="subnav"> 
        <li ><a href="#">Hard Boards</a></li> 
        <li><a href="#">Soft Boards</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Template 2</a></li> 
      <li><a href="#">Template 3</a></li> 
     </ul></li> 
    <li><a href="reviews.html">Clothing</a> 
       <ul class="subnav"> 
        <li><a href="#">Shorts</a></li> 
        <li><a href="#">Shirts</a></li> 
        <li><a href="#">Hoodies</a></li> 
       </ul> 
    </li> 
    <li><a href="reviews.html">Accessories</a> 
      <ul class="subnav"> 
       <li><a href="#">Stickers</a></li> 
       <li><a href="#">Board Combs</a></li> 
       <li><a href="#">Leg Ropes</a></li> 
      </ul> 
    </li> 
    <li><a href="reviews.html">Events</a> 
     <ul class="subnav"> 
      <li><a href="#">ASAP</a></li> 
      <li><a href="#">Indigenous</a></li> 
      <li><a href="#">International</a></li> 
     </ul> 
    </li> 
    <li><a href="reviews.html">Contact Us</a></li> 
</ul> 
</div> 
</body> 
</html>

下一頁CSS

<style> 
    * { 
     padding: 0px; 
     margin: 0px; 
} 
    #nav { 
    width: 960px; 
    height: 30px; 
    background-color: #333333; 
} 

ul.nav { 
    margin-left: 0px; 
    padding-left: 0px; 
    list-style: none; 
    overflow: visible; 
} 
ul.nav li { 
    float: left; 
    position: relative; 

} 
ul.nav a { 
    width: 8em; 
    display: block; 
    padding: 5px; 
    text-decoration:none; 
    color: #FFF; 
    text-align: center; 
} 
ul.nav li a:hover { 

    color: #33ff66; 
} 
.parent { 
    background-image: url("images/arrow-select.png"); 
    background-repeat: no-repeat; 
    background-position: right center; 
}.parent2 { 
    background-image: url("images/arrow-select.png"); 
    background-repeat: no-repeat; 
    background-position: right center; 
} 
.hoverParent { 
    background-image: url("images/arrow.png"); 
    background-repeat: no-repeat; 
    background-position: right center; 
} 
div#nav ul ul li { 
text-decoration: none; 
color: white; 
text-align: center; 
background-color: #333333; 
border: 1px solid #666 ; 
border-top-color: #999999; 
list-style: none; 
} 
div#nav ul ul ul { 
    position: absolute; 
    top: 0; 
    left: 100%; 
} 
div#nav ul ul { 
    position: absolute; 
    z-index: 500; 
} 
div#nav ul ul {display: none;} 

/*Am I Overwriting the jquery??*/ 
div#nav ul li:hover ul{display: block;} 
div#nav ul ul, 
div#nav ul li:hover ul ul, 
div#nav ul ul li:hover ul ul 
{display: none;} 

div#nav ul li:hover ul, 
div#nav ul ul li:hover ul, 
div#nav ul ul ul li:hover ul 
{ 
    display: block; 
} 
</style>

最後JQuery的

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#nav ul li').hover(function(){ 
     $('ul li', this).css("display", "none").toggle(300); 
    }); 
$('#nav ul ul li:has(ul)').addClass("parent"); 
     $('#nav ul ul li:has(ul)').hover(function(){ 
      $(this).addClass('hoverParent'); 
      $('ul li', this).css("display", "none").toggle(300); 
     },function() { 
      $(this).removeClass('hoverParent'); 
     }); 



}); 
</script>

希望你們CANH幫助..我是在正確的軌道林全新的jQuery的

來源

2012-07-11 Brett

與流行的觀點相反，事實上你並沒有在jQuery中編寫這段代碼 - 你已經使用jQuery * library *將它寫在Javascript中，它是用Javascript編寫的。 – 2012-07-11 03:42:35

jsFiddle爲你的問題：http：//jsfiddle.net/efLuD/1/ – 2012-07-11 03:49:35

PLZ看到這裏看不到任何延遲：http://jsfiddle.net/kbqTa/ – 2012-07-11 03:52:00