html实现下拉列表页面

<!-- ~~~~~~~ -->
 <style type="text/css">
   .drop_title{
    height: 40px;
    width: 80px;
    background: lightblue;
    border: 1px solid lightgray;
    text-align: center;
    line-height: 40px;
   }
   .drop_con a{
    display: block;
    text-decoration: none;
    color: black;
    text-align: center;
    height: 40px;
    width: 80px;
    background: lightblue;
    border: 1px solid lightgray;
    line-height: 40px;
   }
   .drop_con{
    display: none;
   }
   .drop:hover .drop_con{
    display: block;
   }
  </style>
  
  <!-- ~~~~~~~ -->
  <div class="drop">
   <div class="drop_title">菜单设置</div>
   <div class="drop_con">
    <a href="#">菜单一</a>
    <a href="#">菜单二</a>
   </div>
  </div>
 <!-- ~~~~~~~ -->