मैं jQuery में अपने मेनू आइटम्स में एक उप तत्व जोड़ना चाहता हूं और सीएसएस

Question

मैंने jQuery और CSS के साथ एक मेनू आइटम बनाया है। जब मैं एक मेनू आइटम पर जाता हूं तो मैं नीचे की छवि में दिखाए गए अनुसार एक अन्य सब मेनू आइटम के लिए जाना चाहता हूं। मैं उसे कैसे कर सकता हूँ?

यहाँ मेरी 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> 

यहाँ मेरी सीएसएस है:

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; 
} 

यहाँ है jQuery के साथ मेरी Javascript कोड:

<!-- 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

ठीक है इस प्लगइन कोशिश बाहर

Superfish

Answer 2

यह लिंक बहुत अच्छी तरह से अवधारणा बताते हैं:

jQuery drop-down menu tutorial

संपादित करें: शायद यह भी मदद मिलेगी: http://css-tricks.com/simple-jquery-dropdowns/