My navigation bar consists of two parts. On the left side, there is a logo image, and on the right side, there are 4 list elements. I am attempting to make a triangle appear at the bottom of the element when hovered. I have floated the list to the right and tried using pseudo-class elements before and after. However, the triangle remains fixed on any element hovered. I have tried adjusting various parameters, but it ends up changing the entire bar.
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
#navlist {
background-color: black;
position: absolute;
width: 100%;
padding-bottom: 0 px;
}
#navlist a {
float:left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 15px;
margin-bottom: 0px;
outline: none;
}
.navlist-right a:hover:before {
content: "";
position: absolute;
top: 40px;
left: 50%;
margin-left: -15px;
width: 0px;
height 0px;
xxmargin: 0px auto;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
.navlist-right a:hover:after {
content: "";
position: absolute;
top: 40px;
left: 50%;
margin-left: -15px;
width: 0px;
height 0px;
xxmargin: 0px auto;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid white;
}
.navlist-right{
width:20%;
float:right;
font-weight: bolder;
padding-bottom: 0 px;
}
#navlist a:hover {
color : #f2f2f2;
}
</style>
</head>
<body>
<!-- Navbar items -->
<div id="navlist">
<ul>
<li class="navlist-left">
<a href="#">
<span class="span-logo">
<img src="/home/sahanaswamy/Downloads/logo.png" />
</span>
</a>
</li>
</ul>
<div class="navlist-right">
<a href="#">Home</a>
<a href="#">Work</a>
<a href="#">Us</a>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>
Is there any way to adjust the properties of before and after to make the triangle dynamic rather than fixed? Changing the top and left properties in the hover element seems to result in a fixed position for the triangle.