how to make triangle hover ithe specified element?

I have a navigation bar of two parts. The left side is a logo pic. The right side bar consists of 4 list elements. I want a triangle to appear at the bottom of the element hovered. I floated the list to the right. Now I tried the pseudo class elements before and after. But the triangle is fixed on any element hovered. I tried to change all the parameters but then the whole bar changes.

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

Should I change any of the before after properties? If i try to change the top and left properties in the hover element, the triangle will end up in a fixed state.



Read more here: https://stackoverflow.com/questions/64399130/how-to-make-triangle-hover-ithe-specified-element

Content Attribution

This content was originally published by sahrakmanswa at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: