styletest.css

:root{
--navcol: rgb(255, 255, 255);
--fontcol: grey;
--hovercol:#316DC3;
}
.sub-manu-1{
    display:none;
}
.navbar-toggler:focus{
background-color: seagreen;

}
.active,.manu-bar li:hover{
    background-color: var(--hovercol);
    border-radius: 30px;
    
}

.manu-bar li:hover .sub-manu-1 {
    display: block;
    position: absolute;
    background-color: var(--navcol);
    columns: var(--fontcol);
}

.manu-bar li:hover .sub-manu-1 ul{
       display: block;
       list-style: none;
      
       margin: 10px 0px;
       padding: 0px;

     
}
.manu-bar li:hover .sub-manu-1 ul li{
    
   min-width: 150px;
  width: auto;
    
    padding: 10px;
    border-bottom: 1px dotted white;
    background:transparent;
    border-radius: 0;
    text-align: left;
    margin: 0px;
       padding: 0px;
    
    
}

.manu-bar li:hover .sub-manu-1 ul li:last-child{
    border-bottom: none;
}

.manu-bar li:hover .sub-manu-1 ul li a:hover{
    color:rgb(15, 199, 15);
}

.fa-angle-right{
    float: right;
}


.sub-manu-l2 {
    display: none;}

.hoverthis:hover .sub-manu-l2 {
    position: absolute;
    display: block;
    margin-left: 200px;
    background-color: var(--navcol);
    margin-top: -33px;

}
.hoverthis2:hover .sub-manu-l2{
    margin-left: 165px;
}
.hoverthis2:hover .sub-manu-l2 ul{
    min-width: 150px !important;
  width: auto;
}
.hoverthis:hover .sub-manu-l2 ul {
  
  min-width: 250px;
  width: auto;
}



.sub-manu-l3 {
    display: none;}

.hoverthis3:hover .sub-manu-l3 {
    position: absolute;
    display: block;
    margin-left: 249px;
    background-color: var(--navcol);
    margin-top: -42px;

}




.navbar-brand img{
    max-width: 225px;
    height: 52px;

}

/* @media only screen and (min-width: 768px){}
.navbar-expand-lg .navbar-collapse {
    display: -ms-flexbox!important;
    display: flex!important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
} */