A simple secondary navigation

A simple secondary navigation, HTML structure is as follows;

< ul class = "nav" > < li > < a href = "#" > billing business < / a > < ul class = "two" > < li > < a href = "#" > sales memo < / a > < / li > < li > < a href = "#" > library documents < / a > < / li > < li > < a href = "#" > recipients documents < / a > < / li > < li > < a href = "#" > scrap documents < / a > < / li > < / ul > < / li > < li > < a href = "#" > query business < / a > < ul class = "two" > < li > < a Query href = "#" > sales < / a > < / li > < li > < a href = "#" > library query < / a > < / li > < li > < a href = "#" > recipients query < / a > < / li > < li > < a href = "#" > scrap query < / a > < / li > < / ul > < / li > < li > < a href = "#" > customer management < / a > < ul class = "two" > < li > < a href = "#" > new customer < / a > < / li > < li > < a href = "#" > modify data < / a > < / li > < li > < a Href = "#" > delete customer < / a > < / li > < / ul > < / li > < li > < a href = "#" > the membership card management < / a > < ul class = "two" > < li > < a href = "#" > new membership card < / a > < / li > < li > < a Href = "#" > modify data < / a > < / li > < li > < a href = "#" > delete the membership card < / a > < / li > < / ul > < / li > < li > < a href = "#" > types of membership card < / a > < ul class = "two" > < li > < a Href = "#" > new type < / a > < / li > < li > < a href = "#" > modify categories < / a > < / li > < li > < a href = "#" > delete categories < / a > < / li > < / ul > < / li > < li > < a href = "#" > < / a > permissions management < ul class = "two" > < li > < a href = "#" > add user < / a > < / li > < li > < a href = "#" > permissions Settings < / a > < / li > < li > < a href = "#" > change password < / a > < / li > < li > < a Href = "#" > delete user < / a > < / li > < / ul > < / li > < li > < a href = "#" > out of < / a > < / li > < / ul >

CSS styles

ul.nav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    background: linear-gradient(45deg, #88ad83, #8c1d7800);
    font-size: 20px;
    font-weight: bold;
    position: relative;
}
ul.two{
     position: absolute;
    width: max-content;
    list-style: none;
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    padding: 10px 0;
    visibility: hidden;
    background:white;
    left:0;
    width:100%;   
}
ul.nav>li:hover{
  background:red;
  padding:0 10px 0 10px;
}
ul.two li{
 float:left;
 padding:0 0 0 10px;
}
a{
  text-decoration: none;
}