鼠标悬停(hover)在div上,下方出现另一个div

效果图：

HTML的骨架结构以及CSS的定位

<div class="container">
    <div class="c-select"></div>
    <div class="popup-div"></div>
</div>
<style>
.container{
    position: relative;
    height:64px;
    width:200px;
}
.c-select{
    background:blue;
    height:64px;
    width:200px;
}
.popup-div {
    position:absolute;
    top: 64px;
    left: 50%;
  /*将弹框水平居中 */
    transform: translateX(-50%);
    width:200px;
    height:400px;
    z-index: 9;
    background-color: #ffffff;
    border: 1px solid #eee;
    box-shadow: 0px 1px 3px 1px #eee;
    border-radius: 4px;
    border: 1px solid #eee;
 }
 
//这段代码是小三角的代码
.popup-div::before {
      content: "";
      position: absolute;
      left: -12px;
      top: -56px;
      width: 10px;
      height: 10px;
      margin: 50px;
      transform: rotate(45deg);
      background: #fff;
      z-index: 0;
      border-top: 2px solid #eee;
      border-left: 2px solid #eee;
 }
</style>