I'm facing an issue with my CSS and HTML involving a Press Me button that triggers a dropdown menu to open when clicked. The problem I'm encountering is that when the dropdown opens, it is partially outside of the visible window, requiring users to scroll right to see it entirely.
I attempted to address this by using right: px with various numbers, but this solution ended up making the design non-responsive.
// NO PROBLEM HERE IN JAVASCRIPT!
function myFunction() {
document.getElementsByClassName('dropdown-content')[0].classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('#verify-name')) {
var dropdowns = document.getElementsByClassName('dropdown-content');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}.buttons {
display: flex;
justify-content: flex-end;
color: red;
}
.dropdown-content {
display: none;
position: absolute;
width: 120px;
padding: 14px;
background-color: yellow;
}
.show {
display: flex;
}<div class="buttons">
<div>
<a id="verify-name" onclick="myFunction()">Press Me</a>
<div class="dropdown-content">
<span>Logout</span>
</div>
</div>
</div>