如何在Bootstrap的項目菜單中創建子菜單下拉菜單？

Question

我有一個子菜單工作，但現在我想創建一個子菜單項進入菜單項以打開其他選項。我在菜單上創建了一個項目Produtos，現在我想爲此項目創建其他選項Produtos。

例如：Produtos>打開>Categorias and Produto作爲其選項。

我該怎麼做？

試圖

<!-- Links Inicio --> 
      <ul class="nav navbar-nav navbar-left"> 
       <!-- Menu dropdown Inicio --> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cadastros <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <!--dropdown produtoss--> 
         <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Produtos <b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Categoria</a></li> 
           <li><a href="#">Produto</a></li> 
          </ul> 
         </li> 
         <!--Fim dropdown produtos--> 

         <li><a href="#">Sub-Link 2</a> </li> 
         <li class="divider"></li> 
         <li><a href="#">Sub-Link 3</a> </li> 
         <li><a href="#">Sub-Link 4</a> </li> 
         <li class="divider"></li> 
        </ul> 
       </li> 
       <!-- Menu dropdown Fim --> 

      </ul> 
      <!-- Links Fim --> 

Answer 1

我找到了我想要的東西。

found here：link

Answer 2

希望這將有助於

#menu_container { 
 
    width: 100%; 
 
    background: rgb(250,252,254); 
 
    border: 1px solid rgb(128,128,128); 
 
    font-family: Arial; 
 
    font-size: 9pt; 
 
} 
 

 
ul#menu, ul.submenu{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
ul#menu li{ 
 
    float: left; 
 
} 
 
/* hide the submenu */ 
 
li ul.submenu { 
 
    display: none; 
 
} 
 
ul#menu li a{ 
 
    display: block; 
 
    text-decoration: none; 
 
    padding: 7px 14px; 
 
    float:none; 
 
    color: rgb(51,51,51); 
 
} 
 
/* show the submenu */ 
 
ul#menu li:hover > ul.submenu{ 
 
    display: block; 
 
    position: absolute; 
 
    float:left; 
 
    border: 1px solid rgb(128,128,128); 
 
} 
 
ul.submenu li:hover > ul.submenu{ 
 
    display: block; 
 
    position:absolute; 
 
    left:100%; 
 
    top:0; 
 
    border: 1px solid rgb(128,128,128); 
 
} 
 
ul#menu li:hover li, ul#menu li:hover a { 
 
    float: none; 
 
    background: rgb(230,240,254); 
 
    color: #000; 
 
} 
 
ul#menu li:hover li a { 
 
    background: rgb(250,252,254); 
 
    color: rgb(51,51,51); 
 
} 
 
ul#menu li:hover li a:hover { 
 
    background: rgb(230,240,254); 
 
    color: #000; 
 

 
}

<div id="menu_container"> 
 
    <ul id="menu"> 
 
    <li><a href="#">File</a> 
 
     <ul class="submenu"> 
 
      <li><a href="#">Close</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Edit</a> 
 
     <ul class="submenu"> 
 
      <li><a href="#">Submenu 1</a></li> 
 
      <li><a href="#">Submenu 2</a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li><a href="#">View</a> 
 
     <ul class="submenu"> 
 
      <li><a href="#">Submenu 1</a> 
 
       <ul class="submenu"><li><a href="#">SubSubmenu</a></li></ul> 
 
      </li> 
 
       
 
      <li><a href="#">Submenu 2</a></li> 
 
     </ul> 
 
    </li> 
 

 

 
    <li><a href="#">Logoff</a></li> 
 
    </ul> 
 
</div>

Answer 3

這很容易創建的Web子導航。我想告訴你，你應該從你的第一個嘗試，並遇到任何錯誤或問題，然後訪問stackoverflow。所以我會要求你請檢查css-tricks網站，你會得到適當的想法來創建子導航。

您也可以參考下面的鏈接。

[1]: [https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/][1] 
    [2]: [http://codepen.io/RayM/details/JCtij][1]