Responsive Mobil: MainMenu Dropdown

Guten Tag,
seit einiger Zeit durchsuche ich, im Rahmen einer Designerstellung, die Templatedateien nach den richtigen Passagen, um dem Dropdown innerhalb des MainMenu in der Mobilansicht eine zusätzliche Klasse zu geben, damit ich einen Abstand verringern kann (Siehe Screenshot).

Da das Template mehrere Dropdownknöpfe verwendet und sie allesamt die gleichen Klassen verwenden, kann ich die vorhandene CSS Definition nicht anpassen, weil es dann bei den anderen Dropdownbuttons einen Abstandfehler erzeugen würde (Diese werden richtig angezeigt)
Innerhalb der header.tpl wird auf die mainMenu.tpl verwiesen, doch dort wird nur das reguläre Menü definiert. Außerdem wird in der header.tpl "{event name='afterMainMenu'}" erwähnt, was das sein könnte wonach ich suche, weil der Dropdown im Menü immer zuletzt angezeigt wird. Wo genau kann ich diesem Dropdownbutton eine zusätzliche Klasse geben?
Vielen Dank für baldige Antworten!

Super, bin auf den Gedanken, mit den Klammern vorzugehen nicht gekommen. Vielen Dank!
Das Problem ist gelöst!

Eine Frage hätte ich aber speziell zum Code noch. Ließe sich das nicht auf folgenden Codeexemplar kürzen?

.mainMenu > ul > li.dropdown {
/* CSS CODE */
}