メインナビゲーションの下のセカンダリSubnav

Question

ナビゲーションバーを持っていたいと思います。アイテムの上にカーソルを置くと、その下にサブナビゲーションが2番目のバーに表示されます。

私は、下のコードを使って下に真っ直ぐに下がっているサブナブで作業しています。編集：下にリストされたhtmlで現在動作しているnavの画像が追加されました。

  <ul class="main-section-nav nav navbar-nav"> 
      <!-- Main Nav --> 
     <li class="dropdown"> 
      <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"> 
       Section 
       <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu sub"> 
       <li class="Main"> 
        <a href="url.com" title="">Section Name</a> 
       </li> 
       <li class=""> 
        <a href="url.com" title="">SubNav Item</a> 
       </li> 
      </ul> 
     </li> 
     <!-- End Main Nav --> 
     </ul> 

現在作業：私はそれが仕事をしたいどのように

。

Answer 1

あなたはうまく動作しますサブメニューulにdisplay: flex;を追加する必要があります。あなたは、トップは50pxから静止位置で、移動から.dropdown-menuを設定している場合

.open >.dropdown-menu { 
 
    display:flex !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>

Answer 2

そして、何？

ようなので： https://jsfiddle.net/qaz5cfy8/1