Problem display div mittels klick durch Javaskript

[AMG]

[Vollzitat entfernt]

Hab jetzt nochmal einiges umgeschrieben, ich ersetzte das hover einfach durch mouseover und mouseout... Außerdem hab ich die Classen durch id's ersetzt (der Einfachheit halber, ich versteh die [0] nämlich einfach nicht). Aber irgendwie funktioniert der addEventListener einfach nicht, die Funktionen lassen sich aber über onclick im HTML file aufrufen?!?!?

hier der Code:

		      <div id="dropdown">
                          <Button id="dropbtn">
                              <i class="fa fa-camera"></i> Bilder <i class="fa fa-camera"></i>
                          </Button>
                          <div id="dropdown-content">
                            <a href="#">Link 1</a>
                            <a href="#">Link 2</a>
                            <a href="#">Link 3</a>
                          </div>
                      
                      </div>

document.getElementById('dropdown').addEventListener('click', showmen);
document.getElementById('dropdown').addEventListener('mouseover', showmen1)
document.getElementById('dropdown').addEventListener('mouseout', showmen2)

function showmen() {
    if (document.getElementById('dropdown-content').style.display == 'none') {
        document.getElementById('dropdown-content').style.display = 'block';
    } 
    else {
        document.getElementById('dropdown-content').style.display = 'none';
    }
}

function showmen1() {
    document.getElementById('dropdown-content').style.display = 'block';   
}

function showmen2() {
    document.getElementById('dropdown-content').style.display = 'none';    
}