Voglio aggiungere un elemento secondario ai miei elementi di menu in jQuery e css

Question

Ho creato una voce di menu con jQuery e CSS. Quando vado a una voce di un menu voglio andare per un'altra voce di sottomenu come mostrato nell'immagine qui sotto. Come lo posso fare?

Ecco il mio Tag HTML

<link rel="stylesheet" href="css/style_j.css" type="text/css" media="screen"/> 
    <div class="content"> 
     <ul id="sdt_menu" class="sdt_menu"> 
      <li> 
       <a href="#"> 
        <img src="SlideDownBoxMenu2/images/2.jpg" alt=""/> 
        <span class="sdt_active"></span> 
        <span class="sdt_wrap"> 
         <span class="sdt_link">Home</span> 
         <span class="sdt_descr">Home</span> 
        </span> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/> 
        <span class="sdt_active"></span> 
        <span class="sdt_wrap"> 
         <span class="sdt_link">File Managements</span> 
         <span class="sdt_descr">File Managements</span> 
        </span> 
       </a> 
      <div class="sdt_box"> 
         <a href="#"><img src="SlideDownBoxMenu2/images/1.jpg" alt=""/> 
        <span class="sdt_active"></span> 
        <span class="sdt_wrap"> 
         <span class="sdt_link">Retention</span> 
         <span class="sdt_descr">Retention</span> 
        </span> </a> 
         <a href="#">Illustrations</a> 
         <a href="#">Photography</a> 
        <div class="sdt_box"> 

         <a href="#">Retentionss </a> 
         <a href="#">Illustrations</a> 
         <a href="#">Photography</a> 

       </div> 
       </div> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/> 
        <span class="sdt_active"></span> 
        <span class="sdt_wrap"> 
         <span class="sdt_link">Portfolio</span> 
         <span class="sdt_descr">My work</span> 
        </span> 
       </a> 
       <div class="sdt_box"> 
         <a href="#">Websites</a> 
         <a href="#">Illustrations</a> 
         <a href="#">Photography</a> 
       </div> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/> 
        <span class="sdt_active"></span> 
        <span class="sdt_wrap"> 
         <span class="sdt_link">Portfolio</span> 
         <span class="sdt_descr">My work</span> 
        </span> 
       </a> 
       <div class="sdt_box"> 
         <a href="#">Websites</a> 
         <a href="#">Illustrations</a> 
         <a href="#">Photography</a> 
       </div> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/> 
        <span class="sdt_active"></span> 
        <span class="sdt_wrap"> 
         <span class="sdt_link">Portfolio</span> 
         <span class="sdt_descr">My work</span> 
        </span> 
       </a> 
       <div class="sdt_box"> 
         <a href="#">Websites</a> 
         <a href="#">Illustrations</a> 
         <a href="#">Photography</a> 
       </div> 
      </li> 
     <li> 
       <a href="#"> 
        <img src="SlideDownBoxMenu2/images/1.jpg" alt=""/> 
        <span class="sdt_active"></span> 
        <span class="sdt_wrap"> 
         <span class="sdt_link">Portfolio</span> 
         <span class="sdt_descr">My work</span> 
        </span> 
       </a> 
       <div class="sdt_box"> 
         <a href="#">Websites</a> 
         <a href="#">Illustrations</a> 
         <a href="#">Photography</a> 
       </div> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="SlideDownBoxMenu2/images/6.jpg" alt=""/> 
        <span class="sdt_active"></span> 
        <span class="sdt_wrap"> 
         <span class="sdt_link">Projects</span> 
         <span class="sdt_descr">I like to code</span> 
        </span> 
       </a> 
       <div class="sdt_box"> 
        <a href="#">Job Board Website</a> 
        <a href="#">Shopping Cart</a> 
        <a href="#">Interactive Maps</a> 
       </div> 
      </li> 
     </ul> 
    </div> 
<div> 
    <span class="reference"> 

    </span> 
    </div> 

Ecco il mio CSS:

ul.sdt_menu{ 
    margin:0; 
    padding:0; 
    list-style: none; 
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif; 
    font-size:14px; 
    width:1020px; 
} 
ul.sdt_menu a{ 
    text-decoration:none; 
    outline:none; 

} 
ul.sdt_menu li{ 
    float:left; 
    width:138px; 
    height:40px; 
    position:relative; 
    cursor:pointer; 
} 
ul.sdt_menu li > a{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:138px; 
    height:57px; 
    z-index:12; 

    -moz-box-shadow:0px 0px 2px #000 inset; 
    -webkit-box-shadow:0px 0px 2px #000 inset; 
    box-shadow:0px 0px 2px #000 inset; 
} 
ul.sdt_menu li a img{ 
    border:none; 
    position:absolute; 
    width:0px; 
    height:0px; 
    bottom:0px; 
    left:57px; 
    z-index:100; 
    -moz-box-shadow:0px 0px 4px #000; 
    -webkit-box-shadow:0px 0px 4px #000; 
    box-shadow:0px 0px 4px #000; 
} 
ul.sdt_menu li span.sdt_wrap{ 
    position:absolute; 
    top:20px; 
    left:0px; 
    width:138px; 
    height:57px; 
    z-index:15; 
} 
ul.sdt_menu li span.sdt_active{ 
    position:absolute; 
    background:#111; 
    top:57px; 
    width:138px; 
    height:0px; 
    left:0px; 
    z-index:14; 
    -moz-box-shadow:0px 0px 4px #000 inset; 
    -webkit-box-shadow:0px 0px 4px #000 inset; 
    box-shadow:0px 0px 4px #000 inset; 
} 
ul.sdt_menu li span span.sdt_link, 
ul.sdt_menu li span span.sdt_descr, 
ul.sdt_menu li div.sdt_box a{ 
    margin-left:10px; 
    text-transform:uppercase; 
    text-shadow:1px 1px 1px #000; 
    margin-top:-10px; 
} 
ul.sdt_menu li span span.sdt_link{ 
    color:#fff; 
    font-size:14px; 
    float:left; 
    clear:both; 
} 
ul.sdt_menu li span span.sdt_descr{ 
    color:#0B75AF; 
    float:left; 
    clear:both; 
    width:155px; /*For dumbass IE7*/ 
    font-size:10px; 
    letter-spacing:0px; 
    margin-top:0px; 
    margin-left:-8px; 
} 
ul.sdt_menu li div.sdt_box{ 
    display:block; 
    position:absolute; 
    width:138px; 
    overflow:hidden; 
    height:138px; 
    top:57px; 
    left:0px; 
    display:none; 
    background:#000; 
} 
ul.sdt_menu li div.sdt_box a{ 
    float:left; 
    clear:both; 
    line-height:30px; 
    color:#0B75AF; 
} 
ul.sdt_menu li div.sdt_box a:first-child{ 
    margin-top:15px; 
} 
ul.sdt_menu li div.sdt_box a:hover{ 
    color:#fff; 
} 

Ecco il mio codice JavaScript con jQuery:

<!-- The JavaScript --> 

     <script type="text/javascript"> 
      $(function() { 
       /** 
       * for each menu element, on mouseenter, 
       * we enlarge the image, and show both sdt_active span and 
       * sdt_wrap span. If the element has a sub menu (sdt_box), 
       * then we slide it - if the element is the last one in the menu 
       * we slide it to the left, otherwise to the right 
       */ 
       $('#sdt_menu > li').bind('mouseenter',function(){ 
        var $elem = $(this); 
        $elem.find('img') 
         .stop(true) 
         .animate({ 
          'width':'138px', 
          'height':'57px', 
          'left':'0px' 
         },400,'easeOutBack') 
         .andSelf() 
         .find('.sdt_wrap') 
         .stop(true) 
         .animate({'top':'140px'},500,'easeOutBack') 
         .andSelf() 
         .find('.sdt_active') 
         .stop(true) 
         .animate({'height':'138px'},300,function(){ 
         var $sub_menu = $elem.find('.sdt_box'); 
         if($sub_menu.length){ 
          var left = '138px'; 
          if($elem.parent().children().length == $elem.index()+1) 
           left = '-138px'; 
          $sub_menu.show().animate({'left':left},200); 
         } 
        }); 
       }).bind('mouseleave',function(){ 
        var $elem = $(this); 
        var $sub_menu = $elem.find('.sdt_box'); 
        if($sub_menu.length) 
         $sub_menu.hide().css('left','0px'); 

        $elem.find('.sdt_active') 
         .stop(true) 
         .animate({'height':'0px'},300) 
         .andSelf().find('img') 
         .stop(true) 
         .animate({ 
          'width':'0px', 
          'height':'0px', 
          'left':'85px'},400) 
         .andSelf() 
         .find('.sdt_wrap') 
         .stop(true) 
         .animate({'top':'25px'},500); 
       }); 
      }); 
     </script> 

Answer 1

Ok provare questo plugin fuori

Superfish

Answer 2

Questo legame spiega il concetto molto bene:

jQuery drop-down menu tutorial

EDIT: Forse questo aiuterà anche: http://css-tricks.com/simple-jquery-dropdowns/