如何在bootstrap 3中制作双级菜单？

Question

我正在尝试在Bootstrap 3中创建双层菜单，如下所示：

我在margin-top顶部遇到菜单有问题（我不知道怎么做，因为我已经定制菜单到自定义高度）

这是代码

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container navbar_height">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Menu</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand-left"></div>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a class="hover_navbar glyphicon glyphicon-home" href="#"></a></li>
            <li><a class="hover_navbar" href="#">ITEM1</a></li>
            <li><a class="hover_navbar" href="#">ITEM2</a></li>
            <li><a class="hover_navbar" href="#">ITEM3</a></li>
            <li><a class="hover_navbar" href="#">ITEM5</a></li>
            <li><a class="hover_navbar" href="#">ITEM6</a></li>

        </ul>


    </div
</div>

我添加了一些css

@media (min-width: 1023px){
.navbar{
position: relative;
min-height: 50px;
margin-bottom: 0px !Important;
border: 1px solid transparent;
 }

.navbar_height{
margin-top:40px;
}

.navbar-inverse .navbar-nav > li > a:hover{
    border-bottom: 4px solid #a6ba0d
}

.navbar-right{
    border-top: 1px solid #ededed;
}

.navbar-brand-logo img{
    margin-top:-20px;
}

}

抱歉，我没有把代码放在jsfiddle上（它不能在我的浏览器上运行）

Answer 1

答案很简单，我做到了：

之后：

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">

我补充说：

 <div class="navbar-collapse collapse desktop-only">
        <ul class="nav navbar-nav pull-right desktop-only">
            <li><a class="" href="#">item1up</a></li>
            <li><a class="" href="#">item2up</a></li>
            <li><a class="" href="#">item3up</a></li>
        </ul>


    </div>

并且某些css仅在桌面上可见：

@media (max-width: 1023px){
.desktop-only{
    display:none;
}}