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!

Zitat von b3317133

Normalerweise erzeugt man solche Effekte ohne Grafiken nur mit CSS, hier ein Beispiel.

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

Zitat von Sailor56

Das 'Eckige' ist der Link Tag <a>..
setze da mal für 'ul.menu li a { border-radius: 15px;}'

Die Buttons kleiner? Mach das Padding bei ul.menu größer!

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

Zitat von Sailor56

Für die Höhe der Buttons... die eigentlich gar keine Buttons sind, sondern ein Hyperlink in einem Listenelement... ist wieder der Inhalt des <li> ... also das <a> zuständig.
Teste mal das ..

Code

.secondary-navigation a {
  padding: 5px 0px;
  text-align: center;
}

mit den 5px beim Padding beeinflusst du die Höhe!

Danke für Eure Hilfe und Geduld!!!

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

Zitat von SEpp55

Dafür ist folgendes zuständig:

Code

.secondary-navigation a {
    padding: 10px 30px;
}

Erster Wert oben & unten, zweiter Wert rechts & links.

ABER!!! Du verwendest ein Plugin -
[size=14]PC Custom CSS - [/SIZE]mit:
Last updated: 5 years ago
Die selbe Funktion hat WordPress seit geraumer Zeit selbst an Bord!!!

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