如何在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]