Hallo

Hallo, kriege es nicht hin, dass in der Navigationsliste nicht nur breitere und schmalere Menüpunkte stehen (das klappt), sondern diese auch korrekt bei :hover funktionieren.

Ich vermute, dass deine Links beim hovern nicht gleich breit erscheinen. Wenn ich richtig liege …

Vielleicht kann mal jemand einen Blick werfen. Hier die

testseiteHier der Code für den Bereich:

ul#navi a {

/*display: inline;
padding:14px 5px 15px 14px;
*/

color:#000;
font-weight:bold;
text-align:left;
}

  
… ist das richtig so. Links (`<a>`{:.language-html}) sind per Definition Inline-Elemente. Sie nehmen also nur den für ihren Inhalt (meist Text) benötigten Platz ein. …  
  

> ~~~css

/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */  

> ul#navi li:hover > a , ul#navi  ul li:hover  > a, ul#navi ul  ul  li:hover  > a, ul#navi ul  ul ul  li:hover  > a  {  
>   background:#a33;  
>   width: 103px;  
>   color:#fff;  
> }

… Keine deiner CSS-Regeln ändert am Inline-Status des Inline-Elements <a> etwas.
Um eine gleichmäßige Größe der Links zu erreichen, müssen Inline-Elemente zu (Inline-)Blockelementen werden (siehe dazu: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Doku, Wiki). Damit kannst du ihnen eine vom Inhalt abweichende Dimensionierung zuweisen.

Zum stöbern: Listamatic: one list, many options

Tschö, Auge