引导水平菜单与鼠标在水平子菜单与gab

Question

我想要网页显示菜单，子菜单鼠标在显示屏上水平显示并保持间隙并单击（不更改主菜单位置）。我开发了，它工作不正常。我已经在屏幕上添加了所有细节。

这是我的cshtml代码。

<div class="container">
        <ul class="nav nav-tabs pull-right" id="myTab" role="tablist">
            <li class="active dropdown-toggle"><a role="tab" href="#one" data-toggle="tab">One</a></li>
            <li><a role="tab" href="#two" data-toggle="tab">Two</a></li>
            <li><a role="tab" href="#three" data-toggle="tab">Three</a></li>
            <li class="dropdown" id="mysubmenu">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Testing</a>
                <nav class="navbar" id="mysubmenu" role="navigation">
                    <ul class="nav navbar-nav navbar-left">
                           <li><a href="#">Test sub 1</a></li>
                            <li><a href="#">Test sub 2</a></li>
                            <li><a href="#">Test sub 3</a></li>
                            <li><a href="#">Test sub 4</a></li>
                        </ul>
                    </nav>
            </li>
        </ul>
        </div>

这是我的jQuery类

<script>
    $(function () {
       $("#mysubmenu ul").hide();

        $("#mysubmenu a").mouseover(function () {
            var isdropdown = $("#mysubmenu").hasClass("dropdown");
            //alert(isdropdown);
            if (isdropdown) {
                $("#mysubmenu ul").show();

                $("#mysubmenu").removeClass("dropdown");
                $("#mysubmenu").addClass("dropup");
            } else {
                $("#mysubmenu ul").hide();
                $("#mysubmenu").removeClass("dropup");
                $("#mysubmenu").addClass("dropdown");
            }

            event.preventDefault();
        });

      

    })
    </script> 

这是我的CCS

.nav-tabs> li.active > a, .nav-tabs> li.active > a:hover, .submenu > .nav {
    
}

这是我的详细信息和最终结果

Answer 1

将填充顶部添加到＆＃34; #mysubmenu ul＆＃34;

#mysubmenu ul
  {
    padding-top:100px;
  }