带有下拉菜单的选项卡式内容

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