.menu {
     padding:0px;
     margin:0px;
     display: flex;
     font-family: 'Raleway', sans-serif;
}

.menu li {
     margin:0px 0px 0px 10px;
     display:inline;
     list-style:none;
     position:relative;

}
.menu li a {
     display:block;
     text-decoration:none;
     text-transform:capitalize;
     font-size:17px;
     color: #333;
     text-align: center;
     text-transform: uppercase;
     font-weight: bold;
     border-right: 1px solid black;
     padding-right: 10px;
}
.menu li:last-child a {
     padding-right:0px;
     border: none;
}
.menu li a:hover,.menu .highlight {
     color: #f60;
}
.menu li ul {
     height:auto;
     position:absolute;
     top:100%;
     left:0px;
     z-index:10;
     display:none;
     margin:0px;
     padding:0px;
     width:15vw;
}
.menu li ul li a {
     display:block;
     padding:15px 10px;
     text-decoration:none;
     color:#fff;
     background:#333;
     border:none;
     line-height:normal;
     text-transform:none;
     font-size:13px;
     text-align:left;
     font-weight:400;
}
.menu li ul li a:hover {
     color:#fff;
     border:none;
     background:#000;
}
.menu li li {
     display:block;
     float:none;
}
.menu li:hover > ul {
     display:block;
}
.menu li ul ul {
     left:90%;
     top:0px;
}

.menu .batas {}

@media (max-width: 740px){
     .menu {
          flex-wrap: wrap;
     }
     .menu li {
          padding-bottom:10px;
     }
     .menu-container {
          justify-content: center;
          align-content: center;
     }
}
@media (min-width: 741px){
     .menu-container {
          justify-content: flex-end;
          align-content: center;
     }
}
@media (min-width: 992px)
{

}