button soll liste zentriert anzeigen

[BLR]

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

<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

.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

 

[SpiceLab]

Dann habe ich ohne Erfolg mit den Kombinationen aus "Acitve, Focus" etc probiert.

https://jsfiddle.net/spicelab/qo0bk7gd/

:active u. :focus nicht auf <div> sondern <button> angewendet, und weil es sich in dem Selektor nun um benachbarte Elemente handelt, unter Zuhilfenahme des Nachbarselektors.

 

[BLR]

ahh super, ich danke dir viel mals.
ich habe das allerdings so geschrieben:

button:active button:hover{
      .....
}

Ich dachte, man kann beim css die pseudo-klassen einfach so
hintereinander schreiben.
Was bedeutet plus-zeichen?

 

[SpiceLab]

ich habe das allerdings so geschrieben:

button:active button:hover{
      .....
}

Ich dachte, man kann beim css die pseudo-klassen einfach so
hintereinander schreiben.

Nein, kann man nicht. Ansonsten funktioniert das CSS an dieser Stelle überhaupt nicht.

Was bedeutet plus-zeichen?

Hatte ich eben in meiner ersten Antwort nachgereicht.

:active u. :focus nicht auf <div> sondern <button> angewendet, und weil es sich in dem Selektor nun um benachbarte Elemente handelt, unter Zuhilfenahme des Nachbarselektors.