Estoy buscando una manera de poner un mini menú desplegable después de CADA enlace dentro de un .Post-body div. , pero no puedo encontrar la manera correcta.
Mi div de ejemplo: https://jsfiddle.net/0zc4pbqh/2/
<div class="Post-body"><p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a> lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum <a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a> lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p></div>¿Cuál es la forma correcta de hacer esto?
ps Quiero llenar este menú desplegable con una captura de pantalla del sitio web (de una API).
intente esto aunque tiene algún error cuando va al final de la página o al final derecho que puede modificarse
const pbody = document.querySelector(".Post-body"), ancS = pbody.querySelectorAll("a"), menu = pbody.querySelector(".menu") ancS.forEach(each=>{ each.addEventListener("mouseover",e=>{ let cords = each.getClientRects()[0], x = cords.x, y = cords.y, offset = {x:0,y:40} menu.style.display="block" menu.style.left = (x + offset.x) + "px" menu.style.top = (y + offset.y) + "px" // on menu show (each is current anchor tag) menu.innerHTML = "you are hovering over :" + each.href }) each.addEventListener("mouseout",e=>{menu.style.display="none"}) }) .menu { position: absolute; width: 300px; height: 300px; background:white; box-shadow: 0px 0px 0px 2px black; display: none; } <div class="Post-body"> <p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/</a> sdfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd <a href="https://www.youtube.com/" rel=" nofollow ugc">https://www.youtube.com/</a> dsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfddsfdsfdsfdsfdsfdsfd sfdsfdsfdsf sfdsfdsfdsfdsfdsfdsfdsfdsfd</p> <div class="menu"> this is menu </div> </div><script> function favTutorial() { var mylist = document.getElementById("myList"); document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text; } </script> <div class="Post-body"><p><a href="https://www.netflix.com/" rel=" nofollow ugc">https://www.netflix.com/ <select id = "myList" onchange = "favTutorial()" > <option> ---Choose tutorial--- </option> <option> w3schools </option> <option> Javatpoint </option> <option> tutorialspoint </option> <option> geeksforgeeks </option> </select> </a>Debe crear una selección con una identificación específica y usar esa identificación para mostrar su lista desplegable. También puede usar la clase (document.getElementsByClassName) si el contenido de todos los menús desplegables es el mismo.
https://www.javatpoint.com/how-to-create-dropdown-list-using-javascript
Consulte este enlace también.