html - 如何制作方形下拉菜单？

Question

我想制作一个如下所示的方形下拉菜单:

我尝试过的:

            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Class View <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Student 1</a></li>
                    <li><a href="#">Student 2</a></li>
                    <li><a href="#">Student 3</a></li>
                    <li><a href="#">Student 4</a></li>
                    <li><a href="#">Student 5</a></li>
                    <li><a href="#">Student 6</a></li>
                    <li><a href="#">Student 7</a></li>

                </ul>
            </div>

我得到的:

有人可以给我一些提示，或者帮我实现这个目标吗？

Fiddle

Answer 1

这里:

.btn {
   border-radius: 0;
}

如果你想自定义你的选择看起来像你发布的那个(使用自定义箭头等)，你应该使用类似 Chosen 的东西或 Selecter