css dropdown menu

<ul>
  <li class="left">abc</li>
  <li class="middle" id="middle" >
    def
    <div>
      <ul style="border:1px solid red;">
        <li>l1</li>
        <li>l1</li>
        <li>l1</li>
      </ul>
    </div>
  </li>
  <li class="right">hjk</li>

</ul>

ul{
  list-style-type: none;
}


.left, .middle,.right{
   float:left;
    width:120px;  
    border:1px solid red;
    margin-right:2px;
    position:relative;

}

ul li#middle > div
{
  box-sizing: border-box;
  position:absolute;
  display:block;
  left:-10%;
  width:120%;
  top:100%;
  margin-top:4px;
  border:2px solid green;
}