0
<ul id="multicol-menu" class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div class="row" style="width: 400px;">
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">A</a></li>
                        <li><a href="#">B</a></li>
                        <li><a href="#">C</a></li>
                    </ul>
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">a</a></li>
                        <li><a href="#">b</a></li>
                        <li><a href="#">c</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>

Above code is working perfect for dropdown but How to make above code hoverable.when someone hover his/her mouse than 3 column would be shown, currently its perfectly for dropdown.

mehran
  • 27
  • 3
  • 8
  • 1
    http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click and http://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover – Michael Coker Jan 15 '17 at 18:32
  • 1
    Possible duplicate of [Bootstrap Dropdown with Hover](http://stackoverflow.com/questions/16214326/bootstrap-dropdown-with-hover) – vanburen Jan 15 '17 at 18:33

1 Answers1

0

When you click the dropdown button the class "open" is applied to the same element as "dropdown" which triggers this css

.open > .dropdown-menu {
    display: block;
}

so the easiest solution is to take advantage of this in your css like this

.dropdown > .dropdown-menu {
    display: block;
}
Chris
  • 129
  • 4
  • thanks @Chris i have added following code .dropdown:hover > .dropdown-menu { display: block; its working but its too fast when i hover mouse display very fast and also on mouse out it show off very fast. how i can controlle this? i have added following jquery code but its not working please let me where is the mistake? $(".dropdown").hover(function(){ $(this).find(".dropdown-menu").stop(true,true).delay(200).fadeIn(500); },function(){ $(this).find(".dropdown-menu").stop(true,true).delay(200).fadeOut(500); }); – mehran Jan 16 '17 at 14:13
  • Thanks to css3 there is no need to handle all that jquery, unless you want to. Instead we now have css transitions like [this](https://css-tricks.com/almanac/properties/t/transition/) example. So in your case ".box" = ".dropdown-menu" and ".box:hover" = ".dropdown > .dropdown-menu" – Chris Jan 16 '17 at 18:18
  • Thanks chris for your feedback :-) – mehran Jan 18 '17 at 11:34