如何将下拉代码在bootstrap转换为hoverable？ [英] how to convert dropdown code in bootstrap into hoverable?

问题描述

<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>

上面的代码适用于下拉，但如何使上面的代码hoverable.when有人徘徊他/她

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.

推荐答案

当你点击下拉按钮类打开应用于与触发此css的下拉列表相同的元素

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

所以最简单的解决方案是利用这个在你的css像这样

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

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

这篇关于如何将下拉代码在bootstrap转换为hoverable？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！