如何将bootstrap中的dropdown代码转换为hoverable？

Question

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

上面的代码对于dropdown是完美的，但是如何让上面的代码hoverable.when某人悬停他/她的鼠标超过3列将会显示，目前它对于dropdown是完美的。

Answer 1

当您单击dropdown按钮时，类"open“将应用于与"dropdown”相同的元素，从而触发此css

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

因此，最简单的解决方案是在css中利用这一点，如下所示

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