.drophover{
display:none;
width:150px;
height:10px;
position:absolute;
margin-top:10px;
margin-left: -20px;
}
.li:hover .drophover{
display:block;
}

<style>
.li:hover .drop{
display:block;
opacity:1;
      -webkit-animation-name: 'movement';
      -webkit-animation-duration: 0.2s;
      -webkit-animation-timing-function: easy-out;
-webkit-animation-direction:alternate;
      -moz-animation-name: 'movement';
      -moz-animation-duration: 0.2s;
      -moz-animation-timing-function: easy-out;
-moz-animation-direction:alternate;
      -o-animation-name: 'movement';
      -o-animation-duration: 0.2s;
      -o-animation-timing-function: easy-out;
-o-animation-direction:alternate;
      animation-name: 'movement';
      animation-duration: 0.2s;
      animation-timing-function: easy-out;
animation-direction:alternate;
}
.ugol{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-bottom: 6px solid #dfdfdf;
border-right: 6px solid transparent;
margin-top: -6px;
margin-left: 25px;
}
.li:hover .drophover{
display:block;
}
body{
background:#ccc;
}
.drop{
opacity:0;
display:none;
position:absolute;
border:1px solid #ddd;
background:#dfdfdf;
z-index:1;
box-shadow:0 1px 6px #a0a0a0;
border-radius:3px;
margin-top:19px;
margin-left: -20px;
}
.dropli:hover{
cursor:pointer;
background:#e3e3e3;
}
.li:hover{//наведение
cursor:pointer;
background:#e1e1e1;
}
.dropli{
padding:5px;
width:150px;
color:#404040;
font-family:calibri;
font-size:10pt;
border-top:1px solid #d0d0d0;
}
.menu{
position:absolute;
z-index:2;
left:0;
right:0;
top:0;
background:#ddd;
box-shadow:0 0 8px #a0a0a0;
}
.drophover{
display:none;
width:150px;
height:10px;
position:absolute;
margin-top:10px;
margin-left: -20px;
}
.li{
display:inline-block;
color:#404040;
font-family:calibri;
font-size:10pt;
padding:10px 20px 10px 20px;
border-right:1px solid #ccc;
}
@-webkit-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@-o-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@-moz-keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
@keyframes 'movement' {
      from {
      top: 55px;
opacity:0;
      -webkit-animation-timing-function: easy-in-out;
      }
      to {
      top: 25px;
opacity:1;
      }   
}
.menu a{
text-decoration:none;
}
.menu a:hover{
text-decoration:none;
}
</style>
<div class="menu"><a href="#"><div class="li">BUTTON</div></a><a href="#"><div class="li">BUTTON</div></a><div class="li">BUTTON</div><div class="li">BUTTONDROP<div class="drophover"></div><div class="drop"><div class="ugol"></div><div class="dropli" style="border-top:none;">DROPLIBUTTON</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div></div></div><div class="li">BUTTON</div></div>