title: My jquery drop menu is acting crazy
body: <p>Hello everyone,
                  I am building a drop menu for my web site and i want to use jquery Its neally working the way i want it to but. I keep getting the shutter effect on the second ul with no effect on the first level.. I know i'm close and missing something obvious. I have included all the css for the menu in  the same page for this post</p>
  
  <p>Here it is</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;script type="text/javascript"&gt;
  $(document).ready(function(){
  $('ul#nav li').hover(function() { //When trigger is clicked...
      var me = this;
      //Following events are applied to the subnav itself (moving subnav up and down)
      $(me).find('ul.subnav').slideDown('slow').show(); //Drop down the subnav on click
      $(me).click(function() {
      }, function(){
          $(me).find('ul.subnav').slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
      });
  });
   $('#nav ul ul li:has(ul)').addClass("parent");
        $('#nav ul ul li:has(ul)').hover(function(){
            $(this).addClass('hoverParent');
             $('ul li', this).toggle("fast");
        },function(){
            $(this).removeClass('hoverParent');
  
        });
  });
  &lt;/script&gt;
  &lt;!--&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;link rel="stylesheet" href="style.css"/&gt;--&gt;
  
  &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;}
  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;
  &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>