ブートストラップのアイテムメニューにサブメニュードロップダウンを作成するにはどうすればよいですか？

Question

サブメニューが動作していますが、他のオプションを開くためのメニュー項目にサブメニューを作成したいと考えています。メニューにProdutosというアイテムを作成しましたが、今度はこのアイテムに他のオプションを追加したいとしますProdutos。

たとえば、Produtos> open>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

私は欲しかったものを正確に見つけました。

ここにある：link

Answer 2

をしようと

希望これは、それがWebでサブナビゲーションを作成するのは非常に簡単です

#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

を助けるべきです。私はあなたが最初にあなたの最後から試して、エラーや問題が発生した場合は、stackoverflowを訪問する必要があることを伝えたいと思います。だから私はのcss-tricksサイトをチェックしてください。ここであなたはサブナビを作成するのに適切なアイデアを得るでしょう。

以下のリンクを参照することもできます。

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