How can I remove the underline under glasses

See more:

CSS

HTML

Hi could you tell me, how can i remove the underline under Glasses
image — ImgBB[^]

the html code:

<section class="header">
        <a href="#" class="logo"><img src="images/logo5.png"></a>
        <nav>
           <!-- <a href="#" class="logo"><img src="images/logo4.png"></a> -->
            <div class="nav-links">
            <ul>
                <li><a href="">HOME</a></li>
                 <!-- About section-->
                 <li>
                    <a href="#">ABOUT</a>
                  <ul>
                      <li><a href="#">Who we are</a></li>
                      <li><a href="#">Culture</a></li>
                      <li><a href="#">Team</a></li>
                  </ul>
                  </li>
                <!--Partners section -->
                  <li>
                    <a href="#">PARTNERS</a>
                    <ul>
                        <li><a href="#">Alpha Micron</a></li>
                        <li><a href="#">Optic Sofia </a></li>
                    </ul>  
                </li>
                <!--Heaven glasses section-->
                   <li><a href="#">HEAVEN GLASSES</a>
                    
                        <ul>
                            <li><a href="#">Product</a></li>
                            <li><a href="#">Glasses</a>
                                <ul>
                                    <li><a href="#">Woman</a></li>
                                    <li><a href="#">Man</a></li>
                                    <li><a href="#">Children</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>

                <!--Reviews and contact -->
                <li><a href="#">REVIEWS</a></li>
                <li><a href="#">CONTACT</a></li>

            </ul>   
            </div>
        </nav>

css code:

*
{
    margin: 0;
    padding: 0;
    font-family: 'Popins', sans-serif;
}

.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(12, 12, 12, 0.514),
      rgba(83, 83, 83, 0.288)), url(images/korica.jpg);
    
    background-position: center;
    background-size: cover;
    position: relative;   
     display: flex;
     align-items: start;
    
}

nav{
    display: flex;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
    
}

.header img{
    padding-top: 2%;
    width: 260px;
}

.nav-links{
    flex: 1;
    text-align: right;
}

.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a{
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 18px;
    padding: 2px 4px;
}

nav ul li a:hover{
    color: #e9d66b;
    border-radius: 5px;
    box-shadow: 0 0 5px #ffaf1a,
    0 0 5px #ffb833;
}


.nav-links ul ul ul li a{
    position: relative;
    top: 40px;
    left: 5px;
    color: aqua;
}

nav ul ul{
    position: absolute;
    top: 90px;
    border-top: 2px solid rgb(255,179,71);
    opacity: 0;
    visibility: hidden;
}

nav ul li:hover>ul{
    top: 40px;
    opacity: 1;
    visibility: visible;
}

nav ul ul li{
   position: relative;
   margin: 0px;
   width: 150px;
   float: none;
   display: list-item;
   border-bottom: 1px solid rgba(0,0,0,0,.3);
   text-align: left;
}

nav ul ul ul li{
    position: relative;
    top: -70px;
    left: 150px;
}

What I have tried:

.nav-links ul ul ul li a{
    position: relative;
    top: 40px;
    left: 5px;
    color: aqua;
}

i tried to move the position of .nav-links, but it doesnt seems like a plan.