YOKO – Untermenü anpassen

Hallo,

ich bin ein ziemlicher Neuling was das ganze Thema WordPress und Theme-Anpassung betrifft. Einiges habe ich ja schon gemeistert, aber nun scheiter ich an einer Stelle.

Ich habe das Untermenü so verändert das nur noch 4 Spalten angezeigt werden. Hierfür habe ich im style.css des Child-Themes folgendes geändert:

/* — Sub Nav — */
nav#subnav {
margin:0;
padding:0;
overflow: hidden;
}
nav#subnav ul.menu {
margin: 5px 0 0 0;
padding:16px 0 30px;
border-top: 1px solid #ddd;
overflow: hidden;
}
nav#subnav ul.menu li.menu-item {
width: 25%;
margin:0px;
float: left;
list-style: none;
}
nav#subnav ul.menu li.menu-item a {
font-size: .8em;
text-transform: uppercase;
font-weight: bold;
}
nav#subnav ul.menu li.menu-item ul.sub-menu {
margin: 0;
padding: 6px 0 0;
overflow: hidden;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item {
width: 100%;
letter-spacing: 0;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item a {
font-size: .8em;
font-weight: normal;
color: #888888 !important;
line-height:2;
text-transform: none;
}

Am Rechner sieht das ja noch fein aus, aber spätestens ab der Tablet-Darstellung verspringt es mir ganz böse (http://bueltge.de/test/media-query-tester.php?testurl=muetterzentrumbergedorf.de). Eh ist die Menü-Optik von Tablet und Mobile fern vom ursprünglichen Erscheinungsbild des Themes (http://blog-werkstatt.eu/images/blog-posts/responsive-themes/yoko-theme.png).

Kann mir Jemand sagen, an welchen Schrauben ich noch drehen muss, um mit der Optik wieder zufrieden zu sein?

Bin für jeden Rat dankbar :-)

Viele Grüße
Mic74