@mark @Gunnar
Ich danke euch beiden für die ausführliche Hilfe! Echt toll dieses Forum hier! Allerdings habe ich habe mich nocheinmal ein wenig umgeschaut und eine Alternative, die wie ich finde deutlich simpler ist, gefunden:
<div id="dropdown">
<button id="dropbtn" onclick="menudrop()">
<i class="fa fa-camera"></i> Bilder <i class="fa fa-camera"></i>
</button>
<div class="mydrop" id="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
#dropbtn {
background: none;
color: inherit;
padding: inherit ;
font-family: inherit ;
font-size: inherit ;
border: none;
cursor: pointer;
}
#dropdown {
display: inline-block;
}
.mydrop {
display: none;
position: middle;
overflow: auto;
background-color: #f9f9f9;
min-width: 8em;
box-shadow: 0px 10px 20px #595959;
margin-bottom: 0.5em;
margin-top: 0.25em;
}
#dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#dropdown-content a:hover {
background-color: #f1f1f1
}
#dropdown:hover .mydrop {
display: block;
}
.show {
display: block;
}
function menudrop() {
document.getElementById("dropdown-content").classList.toggle('show');
}
window.onclick = function(event) {
if (!event.target.matches('#dropbtn')) {
var dropdowns = document.getElementsByClassName('mydrop');
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
Dabei funktioniert auch das :hover im css und das menü schließt automatisch beim zweiten click. Aber trotzdem habe ich viel gelernt und möchte euch beiden nochmal danken! So ausführliche Antworten habe ich noch nie in Foren bekommen. Tolle Community hier!
grüße Josh