Как создать выпадающее меню на аватаре с JavaScript?

Question

Я пытаюсь реализовать раскрывающееся меню внутри аватара, но пару раз не получилось, вы можете помочь?(с CSS или javascript было бы хорошо, я хотел бы изучить оба)

        <button class="dropbtn">My avatar</button>
        <div class="dropdown-content">
            <a href="#">My dashboard</a>
            <a href="#">Sign up</a>
            <a href="#">Go check out!</a>
        </div>
    </div>

  <img style = "float: right; size: 35px; margin-left: 550px;"class="avatar-large" alt="avatar-large" src="https://cdn3.iconfinder.com/data/icons/fillies-small/64/id-card-512.png" />

Answer 1

Сначала установите видимость содержимого как hidden в вашем CSS, а затем в JavaScript:

document.getElementsByClassName("dropbtn"). addEventListener ("click", function() {
    document.getElementByClassName("dropdown-content").style.visibility = "visible";
});

Или сначала измените отображение кнопки на display: none; и измените его такженад частью JavaScript на style.display и измените ее на block → style.display = "block";