引导下拉菜单不起作用 [英] Dropdown submenu on bootstrap is not working

问题描述

我只是想问为什么它的引导子菜单不起作用，我只是按照这个链接中的说明：（ http://getbootstrap.com/2.3.2/components.html ），但是子菜单上的下拉菜单仍未显示。顺便说一句，我没有改变或覆盖CSS中的类。

这是我的代码！ ：）

 < li class ='dropdown'>< a class ='dropdown-toggle active'data-toggle ='dropdown'href ='＃'>< img src ='images / forbank.png'height = 35 width = 35> Banking< span class ='caret'>< / span>< / a> 
< ul class ='dropdown-menu'> 
< li class ='dropdown-submenu'>< a tabindex =' -  1'href ='＃'>< span class ='glyphicon glyphicon-cog'> < /跨度>交易< / A> 
< ul class ='dropdown-menu'role ='menu'> 
< li>< a tabindex =' -  1'href ='＃'>提取/存款< / a>< / li> 
< li>< a tabindex =' -  1'href ='＃'>固定存款< / a>< / li> 
< / ul> 
< / li> 
< li role ='separator'class ='divider'>< / li> 
< li>< a href ='＃'>< span class ='glyphicon glyphicon-list-alt'> < /跨度>摘要< / a>< / li> 
< li>< a href ='＃'>< span class ='glyphicon glyphicon-wrench'> < /跨度>设置< / a>< / li> 
< / ul> 
< / li> 
  

解决方案

请确认您遵循的说明是否符合您的引导版本。

此外，您可以尝试添加这几行CSS，使事情发挥作用。

  .dropdown-submenu {
 position：relative; 
} 
 
 .dropdown-submenu> .dropdown-menu {
 top：0; 
剩余：100％; 
 margin-top：-6px; 
 margin-left：-1px; 
 -webkit-border-radius：0 6px 6px 6px; 
 -moz-border-radius：0 6px 6px; 
 border-radius：0 6px 6px 6px; 
} 
 
 .dropdown-submenu：hover> .dropdown-menu {
 display：block; 
} 
 
 .dropdown-submenu> a：after {
 display：block; 
 content：; 
 float：right; 
 width：0; 
 height：0; 
 border-color：transparent; 
 border-style：solid; 
 border-width：5px 0 5px 5px; 
 border-left-color：#ccc; 
 margin-top：5px; 
 margin-right：-10px; 
} 
 
 .dropdown-submenu：hover> a：after {
 border-left-color：#fff; 
} 
 
 .dropdown-submenu.pull-left {
 float：none; 
} 
 
 .dropdown-submenu.pull-left> .dropdown-menu {
 left：-100％; 
 margin-left：10px; 
 -webkit-border-radius：6px 0 6px 6px; 
 -moz-border-radius：6px 0 6px 6px; 
 border-radius：6px 0 6px 6px; 
} 
  

I just wanna ask why is it the dropdown submenu on bootstrap is not working, i just followed the instructions in this link: (http://getbootstrap.com/2.3.2/components.html) but still the dropdown sub menu on a submenu did not appear. By the way I did not change or override classes in the CSS.

Here's my code! :)

<li class='dropdown'><a class='dropdown-toggle active' data-toggle='dropdown' href='#'><img src = 'images/forbank.png' height = 35 width = 35>Banking<span class='caret'></span></a>
                <ul class='dropdown-menu'>
                    <li class = 'dropdown-submenu'><a tabindex='-1' href='#'><span class = 'glyphicon glyphicon-cog'> </span>  Transaction</a>
                        <ul class='dropdown-menu' role = 'menu'>
                            <li><a tabindex='-1' href='#'> Withdrawal / Deposit </a></li>
                            <li><a tabindex='-1' href='#'> Fixed Deposit </a></li>
                        </ul>
                    </li>
                    <li role='separator' class='divider'></li>
                    <li><a href='#'><span class='glyphicon glyphicon-list-alt'> </span> Summaries </a></li>
                    <li><a href='#'><span class='glyphicon glyphicon-wrench'> </span>  Settings </a></li>
                </ul>
            </li>

解决方案

Please verify if your the instructions you have followed corresponds to your bootstrap version.

Additionally, you can try to include this few lines of CSS to make things work.

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

这篇关于引导下拉菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！