how to make triangle hover ithe specified element?

Question

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.

score 1 · Accepted Answer · answered Oct 17 '20 at 05:51

You've to use position: relative on a tag.

#navlist {    display: flex;
    justify-content: space-between;
    align-items: center;
        background-color: black;
        position: absolute;
        width: 100%;
  padding-bottom: 0 px;
    }

    #navlist a {
        position: relative;
        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 #fff;

    }

.navlist-right{
display: inline-flex;
        font-weight: bolder;
        padding-bottom: 0 px;
    }

#navlist a:hover {
        color : #f2f2f2;
    }

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

score 0 · Answer 2 · answered Oct 17 '20 at 05:55

You forgot to add position: relative to the a elements.

#navlist a {
  position: relative;
  ...
}

Since you use the position: absolute property to :before and :after pseudo-elements, the element with will be removed from the flow of the page and will be positioned to nearest positioned ancestor.

For more details: How to use CSS Position property

how to make triangle hover ithe specified element?

2 Answers2