title: Making the "jsddm" menu to list sub menus
body: <p>can u help me making this jquery/css/menu to also display a second level ?</p>
  
  <p>this is the code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="jsddm"&gt;
      &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Drop Down Menu&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;jQuery Plugin&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Ajax Navigation&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Effect&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Slide Effect&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Fade Effect&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Opacity Mode&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Drop Shadow&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Semitransparent&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Navigation&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;HTML/CSS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#jsddm
  {   margin: 0;
      padding: 0}
  
      #jsddm li
      {   float: left;
          list-style: none;
          font: 12px Tahoma, Arial}
  
      #jsddm li a
      {   display: block;
          background: #20548E;
          padding: 5px 12px;
          text-decoration: none;
          border-right: 1px solid white;
          width: 70px;
          color: #EAFFED;
          white-space: nowrap}
  
      #jsddm li a:hover
      {   background: #1A4473}
  
          #jsddm li ul
          {   margin: 0;
              padding: 0;
              position: absolute;
              visibility: hidden;
              border-top: 1px solid white}
  
          #jsddm li ul li
          {   float: none;
              display: inline}
  
          #jsddm li ul li a
          {   width: auto;
              background: #9F1B1B}
  
          #jsddm li ul li a:hover
          {   background: #7F1616}
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>    var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
  
  function jsddm_open()
  {  jsddm_canceltimer();
     jsddm_close();
     ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
  
  function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
  
  function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
  
  function jsddm_canceltimer()
  {  if(closetimer)
     {  window.clearTimeout(closetimer);
        closetimer = null;}}
  
  $(document).ready(function()
  {  $('#jsddm &gt; li').bind('mouseover', jsddm_open)
     $('#jsddm &gt; li').bind('mouseout',  jsddm_timer)});
  
  document.onclick = jsddm_close;
  </code></pre>
  
  <p>How can i insert one more level menu and make it work ?, i have been stuck here for a couple of days.</p>
  
  <p>thanks!</p>