bootstrap - 子类别，子类别等扩展悬停

时间：2015-11-17 17:14:04

标签： twitter-bootstrap

如何在Bootstrap上执行此操作，当我将鼠标悬停在<li>Test</li>时，它会显示一些子类别，然后悬停另一个会显示另一个子类别

这是图片示例：

enter image description here

EDIT1 

 <div class="col-md-6">           
    <h5>Dialer Selection</h5>

    <ul class="arrow">
        <li class="dropdown">
            <a  data-toggle="dropdown" class="dropdown-toggle" href="#"> Local Cluster 1 </a>
            <ul class="dropdown-menu">
                <li>Test</li>
            </ul>
        </li>
        <li><a href="#" target="_blank"> Local Cluster 2 </a></li>
        <li><a href="#" target="_blank"> Local Cluster 3 </a></li>
        ....
    </ul>               
</div>

1 个答案:

答案 0 :(得分：0)

答案取决于您使用的Bootstrap版本。

Bootstrap 2.3.2： http://getbootstrap.com/2.3.2/components.html#dropdowns

Bootstrap 3： 下拉功能为removed in Bootstrap 3，但基于answer to a related question is a solution。

从Bootstrap 3解决方案：

<强> 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;}

<强> HTML： 

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
  <li><a href="#">Action</a></li>
  <li><a href="#">Another action</a></li>
  <li><a href="#">Something else here</a></li>
  <li class="divider"></li>
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Second level</a></li>
      <li class="dropdown-submenu">
        <a href="#">More..</a>
        <ul class="dropdown-menu">
            <li><a href="#">3rd level</a></li>
            <li><a href="#">3rd level</a></li>
        </ul>
      </li>
      <li><a href="#">Second level</a></li>
      <li><a href="#">Second level</a></li>
    </ul>
  </li>
</ul>

值得注意的是，悬停功能无法在移动设备上运行。如果您必须支持移动设备，我会在点击时切换子菜单。

相关问题
最新问题