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.