Mit den grafischen Buttons würde ich mir nochmal überlegen. Es ist zwar machbar, aber relativ kompliziert.
Du könntest z.B. für jeden Menüpunkt eine eigene Grafik als Hintergrundbild hinterlegen, aber sobald du die Bezeichnung des Menüeintrags von z.B. "News" auf "Aktuelles" änderst, passt die Grafik nicht mehr. Ausserdem brauchst du für einen Hover-Effekt für jeden Menüpunkt mindestens zwei Grafiken.
Es gäbe da auch noch andere Möglichkeiten für grafische Buttons, aber die sind alle ähnlich kompliziert.
Ich würde es eher mit verschiedenen Hintergrundfarben machen. Da man aber bei den Presets bzw. Custom Styles des Templates nicht ausreichend flexibel ist, würde ich alles ins custom.css packen.
Beispiel:
/* Farben des Hauptmenüs */
/* ********************* */
.sp-megamenu-parent > li > a {
color: orange;
background: green;
margin-right: 2px;
font-size: 16px;
}
.sp-megamenu-parent > li:last-child > a {
margin-right: 0;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a {
color: blue;
background: yellow;
}
/* Trennlinie zwischen Untermenülinks */
/* ********************************** */
.sp-megamenu-parent .sp-dropdown li {
border-bottom: 1px solid;
}
/* Farben des Dropdown (Untermenü) */
/* ******************************* */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
color: blue;
background: yellow;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
color: blue;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
color: magenta;
}
Alles anzeigen
.
. Trotzdem gute Besserung 
