这个下拉框是如何实现的?

这个下拉框是如何实现的?

问题描述:

图片说明

 <!doctype html>
<style>
    .trigger{position:relative;}
    .trigger .popup{position:absolute;left:0px;top:20px;background:#fff;border:solid 1px #000;display:none}
    .trigger:hover .popup{display:block}
</style>
<div class="trigger">
    <a href="#">鼠标移动到这里弹出层</a>
    <div class="popup">
        弹出层的内容<br /> 弹出层的内容<br /> 弹出层的内容
    </div>
</div>

如果想自己写:想完成下面div布局,隐藏。点击上面的bug后显示。当然也可以用bootstrap或者是select2

div+css 模拟出来的弹出框