Pozioma wielopoziomowa pozioma pozycja menu Menu

Question

Czy istnieje sposób utworzenia poziomej wielopoziomowej struktury menu za pomocą programu startowego Nie widziałem żadnych wielopoziomowych menu z orientacją poziomą. Jeśli nie muszę używać zewnętrznych css i stylów do generowania tego rodzaju menu. Struktura próbka strukturze menu jest podobna do tej

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; 
} 

Niektórzy pracujący Jsfiddle przykłady

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