How can I remove the underline under glasses

Hi could you tell me, how can i remove the underline under Glasses, and this text Women,Man,Kids to be a little more slightly below the level of Glasses.

<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>
                
                   <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>

                
                <li><a href="#">REVIEWS</a></li>
                <li><a href="#">CONTACT</a></li>

            </ul>   
            </div>
        </nav>
*
{
    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;
}

Try this:

nav ul ul ul{border-top:none}

I’m just on my way out but this should get you back on track.

nav ul ul li:hover ul {
  border-top: none;
  top: 0; /* adjust to suit*/
  left: 100%;
}
.nav-links ul ul ul li a {
  top: 0;
}
/* remove this
nav ul ul ul li {
  position: relative;
  top: -70px;
  left: 150px;
}
*/

Screen Shot 2022-04-26 at 18.05.39

Don’t move things with relative positioning and try to maintain a more logical approach. Rather than moving the list items move the ul instead. Avoid magic numbers like left:150px when you can use left:100% etc.

Hope that’s a start but could be tidied up a bit and the code shortened here and there.:slight_smile:

3 Likes