I'm trying to build a dropdown when cursor hovers on a navbar element pointing to that element with an arrow up

Question

I am using NextJS and Tailwind CSS. I already built the dropdown but I have an issue building the arrow pointing to the specific element. I built the arrow in a previous version using a div rotated at 45deg but then I couldn't make my dropdown take the full screen. Now I have it full screen and I'm wondering how to make the arrow (div) point to the specific element I'm hovering on. I made sure to hide some details about the website because of confidentiality matters. Here's what I'm trying to achieve:

Here's the code I have so far:

import React from 'react'
import { navLinks } from '../data/navdata'

const DropdownHover = ({ index }) => {
    return (
        <div className="group-hover:block absolute left-0 w-full hidden text-dark-gray mt-8 bg-pink" aria-labelledby="dropdownButton">
            <div className="justify-center">
                <div className="flex py-10 px-20 text-sm justify-between">
                    {navLinks[index].hover.map((link, index) => {
                        return (
                            <div className="" key={index}>
                                <p className="text-navbar-gray py-2 uppercase font-semibold">{link.name}</p>
                                {link.links.map((sublink, index) => {
                                    return(<p className="" key={index}><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href={sublink.path}>{sublink.name}</a></p>)
                                })}
                            </div>
                        )
                    })}
                </div>
                <div className="flex text-sm px-20 py-10">
                    <div className='pr-40'>
                        <p className="text-navbar-gray py-2 uppercase font-semibold">Dummy Data</p>
                        <p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
                        <p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
                        <p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
                    </div>
                    <div>
                        <p className="text-navbar-gray py-2 uppercase font-semibold">Dummy Data</p>
                        <p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
                        <p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
                        <p className=""><a className="bg-pink hover:text-red py-2 block whitespace-no-wrap" href="#">Dummy Data</a></p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default DropdownHover

Answer 1

in CSS you can simply manipulate left property of the arrow if its positioned absolute:

li :nth-child(1):hover .arrow{
left:20rem;
}
li :nth-child(2):hover .arrow{
left:30rem;
}

but if you want to make it completely responsive, first get OffsetX of every li element then add an event listener on mouseclick.

for a better understanding you can check the following project on code pen.

https://codepen.io/piyushpd139/pen/gOYvZPG