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

Question

我正在尝试在顶部导航栏中下拉列表。我想在固定的地方显示下拉内容。

显示在不同位置的每个navitem的下拉框。

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

这里是第5个navitem下拉内容的图片。但下拉框显示在该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到heyght和下拉内容的宽度：

$('.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，我只能提供更多的帮助。 或者更好的实例。