Bootstrap下拉子菜单丢失

更新于2018

该

dropdown-submenu

“子菜单现在在网络上没有什么位置，特别是在移动网络上。它们将在3.0中删除。”

但是，仅需一点额外的CSS，您就能获得相同的功能。

Bootstrap 4 （悬停时的导航栏子菜单）

.navbar-nav li:hover > ul.dropdown-menu {    display: block;}.dropdown-submenu {    position:relative;}.dropdown-submenu>.dropdown-menu {    top:0;    left:100%;    margin-top:-6px;}

CSS

.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 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:#cccccc;    margin-top:5px;    margin-right:-10px;}.dropdown-submenu:hover>a:after {    border-left-color:#ffffff;}.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;}

样本标记

<div  role="navigation">    <div >        <div > <button type="button"  data-toggle="collapse" data-target=".navbar-ex1-collapse">       <span >Toggle navigation</span>     <span ></span>     <span ></span>     <span ></span> </button>        </div>        <div > <ul >     <li >         <a href="#"  data-toggle="dropdown">Drop Down<b ></b></a>         <ul >  <li >      <a href="#"  data-toggle="dropdown">Level 1</a>      <ul >          <li >   <a href="#">link 1</a>          </li>          <li >   <a href="#"  data-toggle="dropdown">Level 2</a>   <ul >       <li><a href="#">link 3</a>       </li>   </ul>          </li>      </ul>  </li>         </ul>     </li> </ul>        </div>    </div></div>