Jquery Delay on the slidedown toggle and no slide up?
<p>Im making progress i think, I have a small pause on the second level of my menu before it slides down and i can't figure why also the is no slideup I thought this would happen with toggle here is my code in a better format i hope</p>

<p>First the HTML</p>

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

<p>Next The CSS</p>

<pre><code>&lt;style&gt;
    * {
        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;
}
&lt;/style&gt;
</code></pre>

<p>Finally the JQuery</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(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');
      });



});
&lt;/script&gt;
</code></pre>

<p>Hope you guys canh help.. am i on the right track  Im brand new to jquery</p>
