bootstrap - subcategories, subcategories, etc expand hover

Question

How to do this on Bootstrap, when I hover the <li>Test</li>, It will show box of sub-categories, then hover another will show another subcategories

This is the picture sample:

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>

[Possible duplicate](http://stackoverflow.com/questions/9758587/twitter-bootstrap-multilevel-dropdown-menu) — Kenney, Nov 17 '15 at 17:17
You don't need a navbar, but you can use the bootstrap menu and submenu to do what you want. I've removed everything but what you need from the fiddle of the accepted answer. [See this fiddle](http://jsfiddle.net/z120r12f/) — Kenney, Nov 17 '15 at 17:24
look at my edit... that's what I've done, I don't know where I wrong — Storm Spirit, Nov 17 '15 at 17:27
Compare with my fiddle, you'll see you're missing the class `open` on your `li.dropdown`. — Kenney, Nov 17 '15 at 17:30
@Kenney not working though, it open directly even I didn't hover it — Storm Spirit, Nov 17 '15 at 17:35

score 0 · Answer 1 · edited May 23 '17 at 12:15

The answer depends on what version of Bootstrap you're using.

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

Bootstrap 3: Dropdown functionality was removed in Bootstrap 3 but based on the answer to a related question there is a solution.

From the Bootstrap 3 solution:

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>

It is worth noting that hover functionality will not work on mobile devices. If you have to support mobile, I would go toggle the submenus on click.

bootstrap - subcategories, subcategories, etc expand hover

1 Answers1