Как создать раскрывающийся список подменю в меню элементов в 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

Я нашел именно то, что хотел.

найдено здесь: 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

Это очень легко создать суб СЧА в Интернете. Я хотел бы сказать, что сначала вы должны попробовать с первого конца и столкнуться с какой-либо ошибкой или проблемой, а затем посетить stackoverflow. Поэтому я бы попросил вас, пожалуйста, проверить сайт css-трюки, где вы получите правильную идею создания подводного навигатора.

Вы также можете ознакомиться со ссылками ниже.

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