WP <5.0 Menü mit Grafik als Hintergrund

Hallo Zusammen,

ich verwende WordPress 4.9.5–de_DE mit dem Theme Twenty Fourteen.
Ich würde gerne ein Menü mit einer Grafik1 als Hintergrund verwenden, der Hintergrund sollte sich
bei Mouseover verändern, Grafik2.

Hat wer einen Tipp für mich?

 

Ich würde das Menü gerne in der linken Seitenleiste und unter dem Header verwenden.
Anbei der Link zur Seite

https://zweirad-aichinger.lima-city.de/

Danke für die Hilfe!

 

Habe jetzt den Tipp von b3317133 weiter verfolgt! Das ganze sieht schon mal sehr gut aus!

Verwende folgenden Code in meiner Custom CSS, wo muss ich den Code noch modifizieren damit den Button kleiner und der Text zentriert ist? Außerdem habe ich noch das Problem, dass ich bei Mouseover eine weißes Rechteck habe und keine Rundungen!



/*-- Menue Links --*/
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.menu li {
border: 3px solid #000;
border-radius: 15px;
background-color: #99cc66;
margin-bottom: 6px; /*-- Abstand zwischen den Menüpunkten --*/
padding: 1px;
text-align: center;
}
ul.menu li a {
display: block;
text-decoration: none;
color: #000;
}
ul.menu li:hover {
background-color: #fff;
}


Danke für Eure Geduld und Hilfe!

LG, Markus

 

Danke für deine Hilfe! Jetzt bin ich fast am Ziel meiner Wünsche

Das Mouseover Problem ist gelöst (ul.menu li a { border-radius: 15px DANKE!!!
Jetzt hab ich noch das Problem mit der Größe des BUTTONS:
- mit marign wird der Button von der Breite kleiner, allerdings ist der Text dann nicht mehr zentriert
- gibt es eine Einstellung mit der ich die Buttons von der Höhe verändern kann?



/*-- Menue Links --*/
ul.menu {
list-style-type: none;
margin: 0;
padding: 40px;
}
ul.menu li {
border: 3px solid #000;
border-radius: 15px;
background-color: #99cc66;
margin-bottom: 6px; /*-- Abstand zwischen den Menüpunkten --*/
padding: 1px;
text-align: center;
}
ul.menu li a {
border-radius: 15px;
text-decoration: none;
color: #000;
}
ul.menu li:hover {
background-color: #fff;
}



https://zweirad-aichinger.lima-city.de/

DANKE LG, Markus

 

Danke für Eure Hilfe und Geduld!!!

JA DAS WAR ES (.secondary-navigation a {
padding: 5px 0px;
text-align: center;
}
DANKE!!!

 

Danke für den Hinweis! Das habe ich nicht gesehen und gewusst!
Habe den Code jetzt im Bord eigenen Bereich eingetragen! DANKE