Kategoriennavigation in der Sidebar mit einem a:hover-Effekt erstellen

Soenke

Hallo,

meine Kategoriennavigation in der sidebar links möchte ich gerne mit einem a:hover-Effekt erstellen, der den Hintergrund bei etwas dunkler absetzt, wenn die Maus darüber bewegt wird.

Folgenden Code habe ich in der style.css erstellt:

Code

#nav_menu-3 {
border-left: 1px solid #DDDDDD;
}


#nav_menu-3 h4 {
margin: 0px;
font-size: 18px;
padding: 15px 5px 15px;
background-color: #d5d5d5;
}


#nav_menu-3 li {
padding: 5px;
background-color: #f5f5f5;
}


#nav_menu-3 li a:hover {
color: #ffffff;
background-color: #d5d5d5;
}

Alles anzeigen

Der Code in der letzten Zeile bewirkt aber nur, dass die Schrift bei Hover weiss wird und der Hintergrund um die Schrift herum etwas dunkler wird.

Ich würde aber gerne erreichen, dass die gesamte Zelle bzw. das gesamte Listenelement dunkler wird (und nicht nur um die Schrift herum).

Weiß hier jemand Hilfe für einen Anfänger?

Grüße
Sönke

p.s.: vgl. auch http://rechtsanwalt-und-sozialrecht.de

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

endcore

Zunächst bei dem <li> das padding auf 0 setzen

Code

#nav_menu-3 li {
  padding:0;
}

Danach die Lnks auf display:block setzen und das Padding vom <li> hinzufügen.

Code

#nav_menu-3 li a {
  display: block;
  padding: 12px 8px;
}

Sollte helfen. :)

Soenke

Verbindlichsten Dank!

Es funktioniert!

Grüße
Sönke

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Kategoriennavigation in der Sidebar mit einem a:hover-Effekt erstellen

Jetzt mitmachen!