Bootstrap：固定位置顶部导航栏中的下拉菜单

Question

我正在尝试在顶部导航栏中制作下拉菜单。我想在固定位置显示下拉内容。

每个导航项的下拉框显示在不同的位置。

这里是最左边navitem的下拉内容图片。 我想在这个地方显示所有navitem的下拉框。

这里是第5个navitem的下拉内容图片。但下拉框显示在该导航项的右侧。

导航栏：

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse dropdown navbar-ex1-collapse">
        <ul class="nav navbar-nav category-nav">
          <li><a href="#" data-toggle="dropdown" style="border-right&#58;#fff 1px solid;color:white;">Electronics</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                    <li><a href="#">subcategory1</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory1</a></li>   
                                <li><a href="#" style="color:black">sub_subcategory2 ....</a></li>
                        </ul>
                    </li>
                    <li><a href="#" >subcategory2</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory</a></li>                
                        </ul>
                    </li>
                    <li><a href="#">subcategory3</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory</a></li>                
                        </ul>
                    </li>
                    <li><a href="#">subcategory4</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory1</a></li>   
                                <li><a href="#" style="color:black">sub_subcategory2 ....</a></li>
                        </ul>
                    </li>
                    <li><a href="#" >subcategory5</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory</a></li>                
                        </ul>
                    </li>
                    <li><a href="#">subcategory6</a>
                        <ul>
                                <li><a href="#" style="color:black">sub_subcategory</a></li>                
                        </ul>
                    </li>
                </ul>
         </li>
... .... ...
<li><a href="#" data-toggle="dropdown" style="border-right&#58;#fff 1px solid;color:white;">Food</a>
....
   </ul>
 </div>

</nav>

Jquery 到下拉内容的高度和宽度：

$('.navbar-nav>li>.dropdown-menu').css("width",$('.category-nav').width());
$('.navbar-nav>li>.dropdown-menu').css("max-height","300px");

Answer 1

在 CSS 中更改下拉菜单的属性

.dropdown-menu {
position: fixed !important;
/*left: 25% !important;*/
top:146px;
display: none;

}

要集中下拉菜单并设置宽度添加这个jquery

var ddw = $('.category-nav').width();//set ddw to width of navbar
$('.navbar-nav>li>.dropdown-menu').css("width",ddw);
$('.dropdown-menu').css("left",($(window).width()-ddw)/2);//centralise dropdown menu
$(window).resize(function() {
    $('.dropdown-menu').css("left",($(window).width()-ddw)/2);//centralise dropdown menu during resizing window
});

Answer 2

您的问题是ul.nav > li > ul 的位置相对于ul.nav > li。 这应该在您的 CSS 中删除，您应该将 position:relative; 添加到您的 ul.nav

那你就近了一步。但是，如果您可以向我展示您的 CSS，我只能提供更多帮助。 或者更好的例子。