@keyframes show-sub-menu {
  0% {opacity: 0;}
  100% {opacity: 1}
}

a {
  text-decoration: none;
}

.sub-menu { 
  display: none; 
  font-size: x-large;
  position: absolute;
  top: 50px;
  left: 0px;
}

.sub-menu .item {
  text-align: center;
  padding: 10px;
  width: 320px;
}

.main-menu:focus ~ .sub-menu, 
.main-menu:active ~ .sub-menu, 
.main-menu:hover ~ .sub-menu,
.sub-menu:hover { 
  animation: show-sub-menu 2s;
  display: block; 
} 

.main-menu {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 58px;
}

.main-menu .icon .line {
  height: 8px;
  width: 40px;
  margin: 8px;
}