Hallo Leute.
Ich habe in einem col-md-12 einen button, der zentriert ist. Wenn man darauf klickt, dann sollen die <li>-Elemente ebenfalls entsprechend unter dem button zentriert sein.
Problem ist dabei, dass ich das nur mit "hover" hinbekomme.
Ich mache es nicht per javascript, weil ich unbekannte Anzahl von buttons habe, die ich nicht einzeln über eine ID im javascript ansprechen kann und wenn ich mit class und js arbeite, dann spreche ich alle buttons an und die Liste wird nicht zentriert unter dem button anzeigt.
Html
Css
Zur zeit funktioniert das mit "hover", aber ich muss das mit einem klick hinbekommen.
"Acitve" ist da ganz gut, allerdings wird die Liste nur angezeigt, während ich den Mausbutton gedrückt halte und wenn ich wieder loslasse, ist die Liste nicht mehr zu sehen. Dann habe ich ohne Erfolg mit den Kombinationen aus "Acitve, Focus" etc probiert.
Danke für jede Hilfe
Ich habe in einem col-md-12 einen button, der zentriert ist. Wenn man darauf klickt, dann sollen die <li>-Elemente ebenfalls entsprechend unter dem button zentriert sein.
Problem ist dabei, dass ich das nur mit "hover" hinbekomme.
Ich mache es nicht per javascript, weil ich unbekannte Anzahl von buttons habe, die ich nicht einzeln über eine ID im javascript ansprechen kann und wenn ich mit class und js arbeite, dann spreche ich alle buttons an und die Liste wird nicht zentriert unter dem button anzeigt.
Html
HTML:
<div class="row">
<div class="col-md-12 text-center">
<div class="dropdown">
<button id="singlebutton" name="singlebutton" class="btn">meine Liste</button>
<div class="dropdown-content">
<ul>
<li>Test1</li>
<li>Test1</li>
<li>Test1</li>
</ul>
</div>
</div>
</div>
</div>
Css
CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
Zur zeit funktioniert das mit "hover", aber ich muss das mit einem klick hinbekommen.
"Acitve" ist da ganz gut, allerdings wird die Liste nur angezeigt, während ich den Mausbutton gedrückt halte und wenn ich wieder loslasse, ist die Liste nicht mehr zu sehen. Dann habe ich ohne Erfolg mit den Kombinationen aus "Acitve, Focus" etc probiert.
Danke für jede Hilfe
Zuletzt bearbeitet: