Bootstrap Horizontales Multilevel-Menü

Question

Gibt es eine Möglichkeit, eine horizontale Multilevel-Menüstruktur mit Bootstrap zu erstellen Ich habe keine mehrstufigen Menüs mit horizontaler Ausrichtung gesehen. Wenn nicht muss ich einige externe CSS und Stile verwenden, um diese Art von Menü zu generieren. Eine Probenstruktur der Menüstruktur ist ähnlich wie diese

Answer 1

<nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <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> 
    <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="root"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Level 1</a></li> 
      <li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a> 
       <ul class="dropdown-menu"> 
        <li><a tabindex="-1" href="#">Level 2</a> 
        </li> 
        <li class="dropdown-submenu"> <a href="#">More..</a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Level 3</a> 
          </li> 
          <li><a href="#">Level 3</a> 
          </li> 
          <li class="dropdown-submenu"> <a href="#">More..</a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Level 4</a> 
            </li> 
            <li><a href="#">Level 4</a> 
            </li> 
            <li class="dropdown-submenu"> <a href="#">More..</a> 
             <ul class="dropdown-menu"> 
              <li><a href="#">Level 5</a> 
              </li> 
              <li><a href="#">Level 5</a> 
              </li> 
             </ul> 
            </li> 

           </ul> 
          </li> 

         </ul> 
        </li> 
        <li><a href="#">Level 2</a> 
        </li> 
        <li><a href="#">Level 2</a> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">Level 1</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

CSS

.dropdown-submenu{ 
    position:relative; 
} 
.dropdown-submenu > .dropdown-menu 
{ 
    top:0; 
    left:100%; 
    margin-top:-6px; 
    margin-left:-1px; 
    -webkit-border-radius:0 6px 6px 6px; 
    -moz-border-radius:0 6px 6px 6px; 
    border-radius:0 6px 6px 6px; 
} 
.dropdown-submenu:hover > .dropdown-menu{ 
    display:block; 
} 

.dropdown-submenu > a:after{ 
    display:block; 
    content:" "; 
    float:right; 
    width:0; 
    height:0; 
    border-color:transparent; 
    border-style:solid; 
    border-width:5px 0 5px 5px; 
    border-left-color:#cccccc; 
    margin-top:5px; 
    margin-right:-10px; 
} 

.dropdown-submenu:hover > a:after{ 
    border-left-color:#ffffff; 
} 

.dropdown-submenu .pull-left{ 
    float:none; 
} 

.dropdown-submenu.pull-left > .dropdown-menu{ 
    left:-100%; 
    margin-left:10px; 
    -webkit-border-radius:6px 0 6px 6px; 
    -moz-border-radius:6px 0 6px 6px; 
    border-radius:6px 0 6px 6px; 
} 

.root:hover .dropdown-menu{ 
    display: block; 
} 

Einige Arbeits Jsfiddle Beispiele

• Example 1
• Example 2
• Example 3
• Example 4