I have a menu that looks like this:
https://i.sstatic.net/WqN33.png
and I want to create a hover effect where another div shows up over each item, similar to this:
https://i.sstatic.net/JRaoF.png
However, I can't seem to figure out how to implement it. I've experimented with placing the div inside each router-link and setting its z-index, as well as changing the display using CSS from "display: none" to "display: block" on hover, but nothing has worked so far.
This is the current code for the menu:
<div class="ml-auto p-3 d-none d-lg-flex align-items-center">
<div class="d-flex">
<router-link
class="
routerlink
text-gray-600
hover:text-gray-400
fs-13
mx-2
font-weight-500
"
to="/beer-universe"
>Beer Universe</router-link
>
</div>
<div class="vl mx-2"></div>
<div class="d-flex position-relative justify-content-center">
<router-link
class="
text-gray-600
hover:text-gray-400
fs-13
mx-2
font-weight-500
"
to="/ambassadors"
>We Are Ambassadors</router-link
>
</div>
<div class="vl mx-2"></div>
<div class="d-flex">
<router-link
class="
text-gray-600
hover:text-gray-400
fs-13
mx-2
font-weight-500
"
to="/linkedin-learning"
>
Train
</router-link>
</div>
<div role="button" class="d-flex mx-2" @click="showSearchBox()">
<span
class="icon-buscar fs-20 mx-2"
:class="showSearch ? 'text-red-400' : 'text-gray-600'"
></span>
</div>
<div role="button" class="mx-2" @click="showHideMenuProfile()">
<img
v-if="user.prof_picture !== null"
class="rounded-circle m-2"
:src="uriResources + '/' + user.prof_picture"
title="Profile"
width="34"
height="34"
style="object-fit: cover"
/>
<img
v-else
class="rounded-circle m-2"
title="Profile"
width="34"
height="34"
:src="imgVideo"
/>
</div>
</div>