Reports

Here is some example code i drafted which has the behavior you want. I also recommend using JS events, like .addEventListener() or use mouse attributes like onclick, onmouseover, etc.

const inputField = document.getElementById('inputField');
const dropdownMenu = document.getElementById('dropdownMenu');


inputField.addEventListener('focus', () => {
    dropdownMenu.classList.add('active');
});

// hide the dropdown when clicking outside for better user experience :D
document.addEventListener('click', (event) => {
    if (!inputField.contains(event.target) && !dropdownMenu.contains(event.target)) {
        dropdownMenu.classList.remove('active');
    }
});

/* reset and styling for the .form-group */
.form-group {
    position: relative;
    display: block;
}

/* styling for the input field */
.input-field {
    width: 100%; /* makes the input take the full width of its container */
    padding: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

/* styles for the dropdown menu */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* matches the width of the input field */
    background-color: white;
    border: 1px solid #ccc;
    display: none;
    z-index: 1000;
}

.dropdown ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.dropdown li {
    padding: 8px;
    cursor: pointer;
}

/* and a dropdown to show it works */
.dropdown.active {
    display: block;
}

<div class="form-group">
    <input type="text" id="inputField" class="input-field" placeholder="Enter input" />
    <div class="dropdown" id="dropdownMenu">
        <ul>
            <li>Option 1 :: Change me</li>
            <li>Option 2 :: Change me</li>
            <li>Option 3 :: Change me</li>
            <li>Stackoverflow :D</li>
        </ul>
    </div>
</div>

79303427