帶下拉菜單的選項卡式內容

Question

是否可以添加額外的jQuery來爲這些選項卡添加一個下拉菜單？

下面是添加了下拉菜單項的HTML：

  <div class="tabs"> 

       <ul class="tabs-nav"> 

        <li><a href="#tab1">Tab 1</a></li> 
        <li><a href="#tab2" >Tab 2</a></li> 
        <li><a href="#tab3" >Tab 3</a> 
          <ul><!-- added drop-down items --> 
           <li><a href="#son-of-tab3" >drop-down 1</a></li> 
           <li><a href="#son-of-tab3" >drop-down 2</a></li> 
          <li><a href="#son-of-tab3" >drop-down 3</a></li> 
          </ul> 
        </li><!-- end tab 3--> 

       </ul> 

       <div class="tabs-content"> 

        <div id="tab1" class="content"> 
         <!-- tab1 content --> 
        </div> 

        <div id="tab2" class="content"> 
         <!-- tab2 content --> 
        </div> 

        <div id="tab3" class="content"> 
         <!-- tab3 content --> 
        </div> 

       </div> <!-- /tabs-content --> 

      </div> <!-- /tabs --> 

jQuery的，使標籤的工作，但需要一些額外的東西，使下拉工作？

  <script> 
       $(document).ready(function() { 

        //add active class to the first li 
        $('.tabs-nav li:first').addClass('active'); 

        //hide all content classes. 
        $('.content').hide(); 

        //show only first div content 
        $('.content:first').show(); 

        //add the click function 
        $('.tabs-nav li').click(function(){ 

          //remove active class from previous li 
          $('.tabs-nav li').removeClass('active'); 

          //add active class to the active li. 
          $(this).addClass('active'); 

          //hide all content classes 
          $(".content").hide(); 

          //find the href attribute of the active tab 
          var activeTab = $(this).find("a").attr("href"); 

          //fade in the content of active tab 
          $(activeTab).fadeIn(1000); 

         return false; 

        }); 
       }); 
      </script> 

如果需要

非常感謝，我可以張貼的CSS，

Answer 1

.tabs li ul{ 
    position:absolute; 
    left:0; 
    display:none; 
} 

$(function(){ 
    var parentH = $('.tabs-nav li ul').parent().height(); 
    $('.tabs-nav li ul').css('top', parentH); 
    $('.tabs-nav li').hover(function(){ 
    $('ul', this).show(); 
    }, function(){ 
    $('ul', this).hide(); 
    }); 
}); 

Working jsFiddle