@keyframes line {
  from {
    left:50%;
    width:0%;
  }
  to {
    left:0%;
    width:100%;
  }
}

.navbar {
   display: table;
   border-collapse: collapse;
   width: 100%;
   margin-top: 10px;
   font-size: 14px;
 
 }

.navbar > div {
    display: table-cell;
    width: 150px;
   cursor: default;
}

.dropdown {
  text-align: center;
  width: auto;
}

.dropdown-content{
  background: white;
  opacity:0;
  max-height: 0px;
  transition: all 0.1s;
  visibility: hidden;
}

.dropdown-content a{
  display: block;
  z-index: 1;
  padding: 6px;
  line-height: initial;
}

.point{
    width: 0px;
    height: 3px;
    text-align: center;
    position: relative;
    background: blue;
  }

.menu_span {
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.menu_span:hover .point, .menu_span:active .point {
  animation: line 0.3s linear forwards;
}

.menu_span:hover .dropdown-content, .menu_span:active .dropdown-content {
  visibility:visible;
  max-height: 250px;
  opacity: 1;
}