Frage zum Wiki-Artikel „Dropdown-Menüs mit CSS gestalten“

[Gunnar Bittersmann]

@@cu.so

Wenn du die Outline entfernst, musst du dafür sorgen, dass der :focus-Zusatand anderweitig dargestellt wird; z.B. indem du bei :focus dasselbe tust wie bei :hover

Ich habe jetzt die Outline entfernt und bezügl. des :focus und :hover bin ich mir nicht sicher was du damit meinst? In der Farbeinstellung des Themes habe ich die beiden Angaben auf die gleiche Farbkodierung gesetzt

Nein, eben nicht. Du hast

.no-touch .w-nav-item.level_1:hover > .w-nav-anchor {
    background-color: #ffffff;
    color: #050505;
}

gesetzt, aber nichts für :focus. Damit derselbe Effekt erscheint:

.no-touch .w-nav-item.level_1:focus > .w-nav-anchor,
.no-touch .w-nav-item.level_1:hover > .w-nav-anchor {
    background-color: #ffffff;
    color: #050505;
}

Leider löst es aber auch nicht mein Problem, dass die Navigation in der Mobilansicht nicht sauber untereinander angezeigt wird und damit "chaotisch" ausschaut!

Solange dein Problem, dass die Navigation nicht tastaturbedienbar ist, nicht gelöst ist, macht es keinen Sinn, sich ums Styling zu kümmern. Möglicherweise ändert sich bei der Lösung ja das Markup, und dann müsste man wieder von vorn anfangen.

LLAP 🖖