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>

以上代码适用于下拉菜单，但如何使上述代码可以恢复。当有人将鼠标悬停在他/她的鼠标上时，将显示3列，目前它非常适合下拉列表。

Answer 1

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

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

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

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

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

1 个答案: