I'm looking for a way to put a mini dropdown menu after EVERY link inside a .Post-body div., but I can't find the right way.

My example div: 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>

What is the correct way to do this?

p.s. I want to fill this dropdown with a website screenshot (from an api).

CodePudding user response：

try this although its has some bug when you go bottom of page or right end which can be tweaked

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

<script>  
function favTutorial() {  
var mylist = document.getElementById("myList");  
document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text;  
}  
</script>  
<div ><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>

You need to create a select with specific ID and use that ID to display your dropdown list. You can use class also (document.getElementsByClassName) if the content of all the dropdowns are same.

https://www.javatpoint.com/how-to-create-dropdown-list-using-javascript

Please refer to this link also.