Question

我有一个子菜单工作，但现在我想创建一个子菜单到菜单项打开其他选项。我在菜单上创建了一个项目Produtos，现在我想为此项Produtos创建其他选项。

例如：Produtos＆gt;打开＆gt; 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

在网络中创建子导航非常容易。我想告诉你，你应该先尝试一下，遇到任何错误或问题，然后访问stackoverflow。所以我会请你检查 css-tricks 网站，在那里你可以正确地创建子导航。

您也可以参考以下链接。

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

Answer 2

我找到了我想要的东西。

在此处找到：link

Answer 3

希望这应该有所帮助

#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>

如何在Bootstrap的项目菜单中创建子菜单下拉列表？

3 个答案: